带有 Vue JS 的 Vuex 中的模块化存储不起作用答案

【问题标题】：Modular store in Vuex with Vue JS is not working带有 Vue JS 的 Vuex 中的模块化存储不起作用
【发布时间】：2018-10-12 09:38:50
【问题描述】：

我正在使用 Vue + Vuex 开发一个 Web 应用程序。我是 Vue 的新手。我现在正在做的是尝试将 Vuex 集成到我的 Vue 应用程序中。但是当我使用模块化的 Vuex 时，它就不起作用了。

这是我的名为 PersonalInfoFormStore.js 的商店文件

export default {
    namespaced : true,
    state : {
        name : 'this is my name'
    }
}

然后在app.js中，我这样设置Vuex商店

import Vuex from 'vuex';

import PersonalInfoFormStore from './PersonalInfoFormStore';

//other packages


Vue.component("application-form", require('./components/PersonalInfoForm.vue'));

Vue.use(Vuex);

const store = new Vuex.Store({
    modules : {
        PersonalInfoFormStore
    }
});

const app = new Vue({
    el: '#app',
    //other bit of code
    store: store
});

然后在 PersonalInfoForm.vue 中，我尝试像这样访问状态值。

mounted() {

        alert(this.$store.PersonalInfoFormStore.state.name)
        //alert(this.$store.getters.count)
    }

然后在控制台中，我得到了这个错误

app.js:664 [Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'state' of undefined"

found in

我该如何解决？如果我不使用模块化商店并将所有内容放在一个商店中，那么一切正常。但我想要模块化商店。

【问题讨论】：

标签： javascript vue.js vuex vuex-modules

【解决方案1】：

alert(this.$store.PersonalInfoFormStore.state.name)

进入

alert(this.$store.state.PersonalInfoFormStore.name)

【讨论】：

我还有另一个问题。虽然我不能调用突变器。像这样。$store.PersonalInfForm.commit("setName", name)
试试this.$store.commit('PersonalInfoFormStore/setName', name)
@WaiYanHein 抱歉正在做午饭，上面评论的解决方案有效吗？
谢谢。我删除了命名空间：true。有用。但你的一个是正确的解决方案。干杯伙伴。

【解决方案2】：

我认为应该改为this.$store.state.PersonalInfoFormStore.name

【讨论】：