vue3.0模块化(modules) vuex

当项目的vuex储存太多时，非常臃肿 ，特别是多人合作的公司项目，为了便于项目的维护，采取vuex模块化。
更具模块建立文件

首先拆分vuex index.js里面的模块

import { createStore } from 'vuex'
import mutations from "@/store/mutations";
import actions from "@/store/actions";
import getters from "@/store/getters";

import modules from './modules'


export default createStore({

  state: {
    count:0,
    tabsShow: true,
    
  },

  mutations: mutations,

  actions:actions,

  getters:getters,
  //模块导入
  modules:modules
})

mutations.js

import {

  SETTABSHOW,
  DECREMENT
} from "@/store/mutations-types";


export default {
  [DECREMENT](state, data) {
    state.count++;
  },

  [SETTABSHOW](state, data) {
    state.tabsShow = data
  },

}

mutations-types.js

export const SETTABSHOW = 'setTabsShow'//底部导航栏
export const DECREMENT = 'decrement'
export const SELECTEDHOUSE='SELECTEDHOUSE'

modules.js 这个文件是具体的模块文件，在下面内容有介绍

import pano from './modules/pano'
export  default {
pano
}

到这里为止，已经出现雏形，抽离了mutatimutaons、actions等（文件未给出，类型相同与mutatimutaons）对于少量的数据已经可以使用以上的处理进行开发了，但是对于本文的目的还需还需做最后一步处理

pano.js 具体的模块文件，记得在modules.js导入

/**
 * 全景页面
 */

 import {
  SELECTEDHOUSE
} from "@/store/mutations-types";
export default {
  namespaced: true,//其成为带命名空间的模块
  state: {
    selectedHouse: ''
  },


  mutations: {
    [SELECTEDHOUSE](state,data) {
      state.selectedHouse = data
    },
  },
  actions: {
    // 存放token
    userInfo({
      state,
      commit
    }, val) {
      state.token = "5518"
      commit('setToken', val)
    },
  },


}

截至。目标完成，请看示例

 store.commit("pano/SELECTEDHOUSE", "  ");//注意这里的函数名有个    “/”，对应pano.js  里面的  namespaced: true,
  console.log(store.state.pano.selectedHouse);
  // store.dispatch("pano/userInfo", "10086");

end