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;

Arango

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

Arango

...getters['data/loadedPosts'] / ...dispatch('data/setPosts') - Mr.Stark I am not feeling well.. I mean seriouslly this is an awfull syntax.. But you're 100% right that's the new deal with nuxt, big mistake.. – Hypophysis

another way is to create store/data/[actions.js, getters.js, mutations.js, state.js], so nuxt will use "data" folder as a module. – Kidding

Just can't need create index.js – Cribb

Answer 2

If it seems to you that everything has been done as per Nuxt docs but you still see the «Classic mode is deprecated» warning, the following may help:

1. Go to the directory where the built files are, i.e. dist
2. Open store.js
3. See the following piece of code:

if (typeof store === 'function') {
    return console.warn('Classic mode for store/ is deprecated and will be removed in Nuxt 3.')
}

4. Check what is being exported from your store/index.?s — is it a function? That's where the warning comes from. Fix it by exporting an object.

Vaulted

Answer 3

Nuxt display this warning because you use a classic vuex store, not a « modules mode ». You can learn more about in nuxt doc.

Hydromancy