[Vuejs]-Modules vs Multiple vuex store files

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
          });
        },
    }