Modules vs Multiple vuex store files

Question

I am working on a project using vue and vuex. And I think most of the people are having the problem, after sometime the store.js (or index.js) is getting too big. So I want to split the store.js file. After some google I found I can use Modules to overcome this problem. BUT I tried also with creating a new Instance of vuex and it works perfectly fine.

Single instance with modules :
---store.js
import Vuex from "vuex";
import thisismodule1 from "./modules/module1";
import thisismodule2 from "./modules/module2";

const createStore = () => {
  return new Vuex.Store({
    modules: {
      module1: thisismodule1,
      module2: thisismodule2

    }
  });
};

export default createStore;
const store = new Vuex.Store({
module
});



Multiple files with multiple instances:
---storeCar.js
---storeHouse.js
---storeTree.js
...

So my question is, is this allowed or do I have to use modules with single instance?

Thank you in advance!

Answer 1

there is a best practice for that:

1. Create a file. that's name is Shared

2. Create a Store folder and create a modules folder on it:

3. you should modules in the modules folder and define your store for a target:

for example:

import * as types from "../types";

const state = {
  currentPage: {}
};
const getters = {
  [types.avatarManagement.getters.AVATAR_MANAGEMENT_GET]: state => {
    return state.currentPage;
  }
};

const mutations = {
  [types.avatarManagement.mutations.AVATAR_MANAGEMENT_MUTATE]: (
    state,
    payload
  ) => {
    state.currentPage = payload;
  }
};

const actions = {
  [types.avatarManagement.actions.AVATAR_MANAGEMENT_ACTION]: (
    { commit },
    payload
  ) => {
    commit(types.avatarManagement.mutations.AVATAR_MANAGEMENT_MUTATE, payload);
  }
};

export default {
  state,
  getters,
  mutations,
  actions
};

4. Create index.js for define Vuex and import your modules:

index.js file:

import Vue from "vue";
import Vuex from "vuex";
import avatarManagement from "./modules/avatarManagement";

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    avatarManagement
  }
});

5) also you can types of your vuex store on Type.js file:

type.js:



        export const avatarManagement = {
      getters: {
        AVATAR_MANAGEMENT_GET: "AVATAR_MANAGEMENT_GET"
      },
    
      mutations: {
        AVATAR_MANAGEMENT_MUTATE: "AVATAR_MANAGEMENT_MUTATE"
      },
    
      actions: {
        AVATAR_MANAGEMENT_ACTION: "AVATAR_MANAGEMENT_ACTION"
      }
    };

***for get data from Store:

  computed: {

    ...mapGetters({
      registrationData:types.avatarManagement.AVATAR_MANAGEMENT_GET,

    getDataFromStore() {
      return this.registrationData;
    }
}

***for Change data to Store and mutate that:


      methods: {
        goToActivity() {
          const activity = {
            companyList: this.categories
          };
          this.$store.commit(types.avatarManagement.AVATAR_MANAGEMENT_MUTATE, {
            newData
          });
        },
    }