Módulos de enrutadormodular

Debido al uso de un solo árbol de estado, todo el estado de la aplicación se agregará en un objeto relativamente grande. Cuando la aplicación se vuelve muy compleja, el objeto de la tienda tiene el potencial de volverse bastante inflado.
Para solucionar los problemas anteriores, Vuex nos permite dividir la tienda en módulos. Cada módulo tiene su propio estado, mutación, acción, getter e incluso submódulos anidados, divididos de la misma manera de arriba a abajo:
por ejemplo: en uno de mis proyectos, creé un módulo de menú de barra de navegación separado, el nombre del archivo es menu.js, por lo que el diagrama de estructura de mi tienda es el siguiente

Configuración de dos pasos en la tienda index.js
1: Importe los menús de importación del submódulo de la barra de navegación desde '…/store/modules/menu'
2: Menús de referencia en módulos

import Vue from 'vue'
import Vuex from 'vuex'
//导入子模块
import menus from '../store/modules/menu'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    token: ''
  },
  //异步操作state中的变量
  mutations: {

    //将token放入store,并且存储再localStorage
    SET_TOKEN: (state,token) => {
      //mutations中函数会有两个参数:1:state(固定参数,指state),2:其他参数(可以是传过来的数据)
      //这里只能写state,不能写this.state,否则会报错
      state.token = token;
      localStorage.setItem("token",token);
    },
    //logout清除用户信息
    resetState:  (state) => {
      state.token = '';
    }
  },
  actions: {
  },
  modules: {
    //引用导航栏子模块
    menus,
  }
})

menu.js
Nota:
Escritura incorrecta : export default new Vuex.Store ({})
Escritura correcta : export default{}, porque solo puede haber una tienda, y se coloca en index.js debajo de la tienda, por lo que nuestro menú simplemente regresa un objeto
Recuerde hacer referencia al módulo en index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
//错误写法export default new Vuex.Store({})
//正确写法export default{} ，因为Store只能有一个，并且放在store下的index.js
//记得在index.js中引用该模块
export default {
    state: {
        menuList: [],
        permList: [],//权限列表
    },
    //异步操作state中的变量
    mutations: {
        setMenuList(state,menuList){
            state.menuList = menuList;
        },
        setPermList(state,permList){
            state.permList = permList;
        }
     },
    actions: {
    },
}

Variables de submódulo de referencia
Tome la variable menuList en menu.js como ejemplo

///导入store
import store from '../store'
//引用menuList
store.state.menus.menuList