Vuex Classic mode for store/ is deprecated and will be removed in Nuxt 3
Finally, after reading a lot of answers and blogs I figured out the solution.
Important:- Forgot what you know about vuex module in vue.js app. Using Vuex in nuxt.js is a bit different.
Solution:- Nuxt.js lets you have a store directory with every file corresponding to a module. Just add necessary files in the store directly you don't need to create and add files to 'modules' directory in store. index.js file is a special file and this is where we would put the logic that is not related to a module.
store/data.js
export const state = () => ({
loadedPosts: []
});
export const mutations = {
setPosts(state, posts){
state.loadedPosts = posts;
}
};
export const actions = {
setPosts(vuexContext, posts){
vuexContext.commit('setPosts', posts);
}
};
export const getters = {
loadedPosts(state){
return state.loadedPosts;
}
};
Using state in project
this.$store.data.loadedPosts
Using mutations in project
this.$store.commit('data/setPosts', [{id: '1',...}, {id: '2',...}]);
Using actions in project
this.$store.dispatch('data/setPosts', [{id: '1',...}, {id: '2',...}]);
Using getters in project
this.$store.getters['data/loadedPosts'];
Important References:-
- Watch this video Nuxt.js tutorial for beginners - nuxt.js vuex store
- Read this blog Efficiently understanding and using Nuxt + Vuex