Vuejs2 在组件中找不到Vuex数据存储

我正在使用一个带有Vue、Vuetify、Vue路由器和Vuex的项目。其目的是在更模块化的方法中创建一个带有侧栏的基本布局，以便通过Vue实现可伸缩性。所以我创建了一个名为Store的文件夹，它有一个modules文件夹。因此，我在store文件夹中的索引文件如下所示：

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

Vue.use(Vuex);

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

该模块被分解为一个文件，其中包含操作、getter、突变和状态

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
};

我调用Vue实例如下

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
});

我正在尝试访问我的状态并学习如何正确发射，因此在导航组件中，我可以向上发射，以便反映值以打开或关闭侧边栏

---

任何帮助都会非常好，我对Vue非常陌生。

当您试图通过

this.$store

访问存储时，

this

变量不会引用Vue实例

data

对象必须是返回对象的方法

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

但是，通过像这样从存储的

状态

对象和

数据

方法中检索值，您仅在Vue实例初始化时设置

菜单

数据属性的值。

菜单

的值不会随着商店的

状态

中值的更改而更新

---

如果需要

菜单

值在Vue实例的整个生命周期内反映

状态

对象，则需要使用计算属性或

映射状态

，正如@Phil的回答中所建议的。

当您试图通过

this.$store

访问存储时，

this

变量不引用Vue实例

data

对象必须是返回对象的方法

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

但是，通过像这样从存储的

状态

对象和

数据

方法中检索值，您仅在Vue实例初始化时设置

菜单

数据属性的值。

菜单

的值不会随着商店的

状态

中值的更改而更新

---

如果需要

菜单

值在Vue实例的整个生命周期内反映

状态

对象，则需要使用计算属性或

映射状态

，正如@Phil的回答所建议的那样。

我认为主要的问题是你的模块状态路径应该是

这个。$store.state.site

方法是使用计算属性。比如说

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

您也可以使用

---

我认为主要的问题是您的模块状态路径应该是

this.$store.state.site

方法是使用计算属性。比如说

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

您也可以使用

---

好的，您需要将配置传递到main.js中的应用商店。也

Vue.use（Vuex）应该在主菜单中。js@connexo我不是在使用调用它的
Vue.use（store）
吗？好的，您需要将配置传递到main.js中的存储。也
Vue.use（Vuex）应该在主菜单中。js@connexo我不是在使用调用它的
Vue.use（store）
吗？我想你需要访问
这个.$store.state.site.sidebar
。查看我的最新答案。我感谢您的回答，您已经透露了一些信息。我认为您需要访问
此。$store.state.site.sidebar
。看到我更新的答案。我很感激你的答案，你已经透露了一些信息。很好地理解了状态对象的路径。您的解决方案无疑是设置需要对vuex状态作出反应的计算属性的最佳实践。这似乎是OP想要做的（不清楚）。但是我认为，在某些情况下，知道可以使用
data
方法中存储的值初始化数据属性是很有帮助的，因此我也将留下我的答案。您已经说明了一些问题，我感谢您的回答。我仍然有一个类似的问题，但我相信我理解它试图做什么。很好地捕捉到状态对象的路径。您的解决方案无疑是设置需要对vuex状态作出反应的计算属性的最佳实践。这似乎是OP想要做的（不清楚）。但是我认为，在某些情况下，知道可以使用
data
方法中存储的值初始化数据属性是很有帮助的，因此我也将留下我的答案。您已经说明了一些问题，我感谢您的回答。我仍然有一个类似的问题，但我相信我理解它试图做什么。