Currently, I am in the process of building a web application using Vue along with Vuex. Despite being new to Vue, I am attempting to integrate Vuex into my Vue application. However, I am encountering an issue when using modularised Vuex.
In my project, there is a store file named PersonalInfoFormStore.js
export default {
namespaced : true,
state : {
name : 'this is my name'
}
}
Within the app.js file, I have set up the Vuex store as follows
import Vuex from 'vuex';
import PersonalInfoFormStore from './PersonalInfoFormStore';
//other imports
Vue.component("application-form", require('./components/PersonalInfoForm.vue'));
Vue.use(Vuex);
const store = new Vuex.Store({
modules : {
PersonalInfoFormStore
}
});
const app = new Vue({
el: '#app',
//additional code
store: store
});
Subsequently, in PersonalInfoForm.vue, I tried to access the state value using the following code
mounted() {
alert(this.$store.PersonalInfoFormStore.state.name)
//alert(this.$store.getters.count)
}
Unfortunately, upon checking the console, I encountered the following error
app.js:664 [Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'state' of undefined"
found in
I am seeking guidance on resolving this issue. When I have all the data in a single store without modularisation, everything works perfectly fine. However, my preference is to use a modularised store for better organisation and scalability.