I have below files and could not find the reason for warning "Classic mode for store/ is deprecated and will be removed in Nuxt 3". Everything works fine just getting that annoying warning.
modules/data.js file in store of nuxt.js.
const state = () => ({
loadedPosts: []
});
const mutations = {
setPosts(state, posts){
state.loadedPosts = posts;
}
};
const actions = {
setPosts(vuexContext, posts){
vuexContext.commit('setPosts', posts);
}
};
const getters = {
loadedPosts(state){
return state.loadedPosts;
}
};
export default {
state,
actions,
getters,
mutations
};
index.js file in store of nuxt.js.
import Vuex from 'vuex';
import data from "~/store/modules/data";
const createStore = () => {
return new Vuex.Store({
modules: {
data: {
namespaced: true,
...data
}
}
});
};
export default createStore;
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:-