[Vuejs]-Vuex store creates a new instance when imported in different modules

by

0👍

It’s supposed to be done the other way around, you import the module in your vuex and not the vuex in your module.

So you should have a "Master module" that looks like this:

  import Vue from 'vue';
  ///////////Vuex et store
  import Vuex from 'vuex';
  /////////////////Modules
  import media from "./modules/media";

  Vue.use(Vuex);

  export default new Vuex.Store({
    state: {
    },
    getters: {
    },
    mutations: {
    }
    ,
    actions: {
    },
    modules: {
      media
    }
  })

and then your module should simply be like so:

  const state = {
  };

  const getters = {
  };

  const mutations = {
  };

  const actions = {
  };

  export default {
      namespaced: true,
      state,
      getters,
      actions,
      mutations
};

The namespaced part is optional and here is the link to the doc:
https://vuex.vuejs.org/fr/guide/modules.html

In the doc it’s organised in a single file, the way I presented it correspond to one file for the "Master Module" which is your store really, and then a file by module.

Leave a comment