Vuex data store not found in components

Question

I'm using a project with Vue, Vuetify, Vue-Router, and Vuex. The intent was to create a basic layout with a sidebar in a more module approach to dabble in scalability with Vue. So I created a folder called Store, which has a modules folder. So my index file within the store folder is as follows:

import Vue from 'vue';
import Vuex from 'vuex';
import global from './Modules/Global';

Vue.use(Vuex);

export default new Vuex.Store({
     modules: {
          site: global
     }
});

The module is broken down into a single file with actions, getters, mutations, and state.

const actions = {
    sidebarState: ({ commit }, status) => {
        commit('openOrCloseSidebar', status);
    }
}

const mutations = {
    openOrCloseMenu: (status) => {
        if (status !== true)
            return state.sidebar = true;

        return state.sidebar = false;
    }
};

const getters = {

};

const state = {
    sidebar: true
};

export default {
    namespaced: true,
    actions,
    mutations,
    getters,
    state
};

I invoke the Vue instance as follows.

import Vue from 'vue/dist/vue';
import Vuetify from 'vuetify';
import Axios from 'axios';

import application from './Template/Application.vue';

import router from './Router';
import store from './Store';
import { sync } from 'vuex-router-sync';

Vue.use(Vuetify);
Vue.use(router);
Vue.use(store);

sync(store, router);

var vue = new Vue({
    el: '#application',
    template: '<application></application>',
    components: {
        application
    },

    router: router,
    store: store
});

However, when I call this.$store.global.state.sidebar or this.$store.state.sidebar Vue is unable to find my property. I receive the error:

Cannot read property global of undefined.

The error also references state, but I believe since I'm using namespace the syntax should mirror above. Where I attempt to call that is here.

<template>
    <v-container>
        <application_sidebar :my-prop="menu"></application_sidebar>
        <application_navigation :my-prop="menu"></application_navigation>        
    </v-container>
</template>

<script type="text/javascript">
    import application_navigation from './Navigation.vue'
    import application_sidebar from './Sidebar.vue';
    import { mapState } from 'vuex';

    export default ({
        components: {
            application_navigation,
            application_sidebar
        },

        data: {
            menu: this.$store.global.state.sidebar
        }
    });
</script>

I'm trying to access my state and learn how to correctly emit, so in the navigation component I can emit upward so the value is reflected to move the sidebar open or close.

Any help would be terrific, I'm quite new to Vue.

Answer 1

I think the main problem is your path to your module state is meant to be this.$store.state.site.

The recommended method is to use computed properties. For example

computed: {
  menu() {
    return this.$store.state.site.sidebar
  }
}

You can also use the mapState helper

import { mapState } from 'vuex'

export default {
  computed: mapState({ menu: state => state.site.sidebar })
}