Vuex Classic mode for store/ is deprecated and will be removed in Nuxt 3

Question

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;

Answer 1

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:-

1. Watch this video Nuxt.js tutorial for beginners - nuxt.js vuex store
2. Read this blog Efficiently understanding and using Nuxt + Vuex