Modular store in Vuex with Vue JS is not working

Question

I am developing a web application using Vue + Vuex. I am new to Vue. What I am doing now is I am trying to integrate Vuex into my Vue application. But when I use the modularised Vuex, it is not working.

This is my store file called PersonalInfoFormStore.js

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

Then in the app.js, I set up the Vuex store like this

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

Then in the PersonalInfoForm.vue, I tried to access the state value like this.

mounted() {

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

Then in the console, I got this error

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

found in

How can I fix it? If I do not use the modularised store and put all in a single store, everything is working fine. But I want the modularised store.

Answer 1

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

into

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