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

Question

我正在使用一个包含 Vue、Vuetify、Vue-Router 和 Vuex 的项目。目的是用更模块化的方法创建一个带有侧边栏的基本布局，以涉足 Vue 的可扩展性。所以我创建了一个名为 Store 的文件夹，其中有一个 modules 文件夹。所以我在商店文件夹中的索引文件如下：

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

但是，当我调用 this.$store.global.state.sidebar 或 this.$store.state.sidebar 时，Vue 无法找到我的属性。我收到错误：

Cannot read property global of undefined.

该错误还引用了状态，但我相信因为我使用的是命名空间，所以语法应该与上面的相同。我尝试调用它的地方是这里。

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

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

任何帮助都会很棒，我是 Vue 的新手。

Answer 1

当您尝试通过 this.$store 访问商店时，this 变量未引用 Vue 实例。

data对象需要是returns对象的方法。

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

但是，通过像这样的 data 方法从商店的 state 对象中检索值，您只是设置 menu 数据的值属性 Vue 实例初始化。 menu 的值不会更新 以响应商店 state 中值的更改。

如果您需要 menu 值在 Vue 实例的整个生命周期中反映 state 对象，那么您需要使用计算的属性或 mapState，正如@Phil 的回答中所建议的那样。

Answer 2

我认为主要问题是你的模块状态路径应该是 this.$store.state.site。

recommended method是使用计算属性。例如

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

您还可以使用 mapState helper

import { mapState } from 'vuex'

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

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

Vuex data store not found in components

vuejs2

vue-component

vuex

vuex-modules