Question

我正在使用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

我该如何解决？如果我不使用模块化存储，而将所有存储放在一个存储中，则一切运行正常。但是我想要模块化商店。

Answer 1

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

Answer 2

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

进入

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

使用Vue JS在Vuex中进行模块化存储无法正常工作

2 个答案: