前言

避免过多的全局状态。如果不可避免有很多的值需要存在 vuex 中,建议使用动态注册的方式。只是部分业务需要状态处理,建议使用 Event Bus

注册模块(registerModule)

import Vuex from 'vuex'
const store = new Vuex.Store({ /* 选项 */ })

// 注册模块 `myModule`
store.registerModule('myModule', {
  // ...
})
// 注册嵌套模块 `nested/myModule`
store.registerModule(['nested', 'myModule'], {
  // ...
})

卸载模块(unregisterModule)

// 注意,不能使用此方法卸载静态模块（即创建 store 时声明的模块）
// store.unregisterModule(['nested', 'myModule']) // 卸载嵌套模块
store.unregisterModule(moduleName) // 卸载模块

应用

传this的写法

module.exports = {
  install(_this) {
    _this.$store.registerModule(['abc'], {
      namespaced: true,
      state: {
        rightTest: 999
      },
      actions: {
        setTest: ({commit}, val) => {
          commit('putTest', val)
        }
      },
      mutations: {
        putTest: (state, val) => {
          state.rightTest = val;
        }
      }
    })
  },
  uninstall(_this) {
    _this.$store.unregisterModule(['abc'])
  }
}

不传this的写法(推荐)

import store from '../store';

export default {
  install() {
    // 注册abc模块
    store.registerModule(['abc'], {
      namespaced: true,
      state: {
        rightTest: 999
      },
      actions: {
        setTest: ({commit}, val) => {
          commit('putTest', val)
        }
      },
      mutations: {
        putTest: (state, val) => {
          state.rightTest = val;
        }
      }
    })
  },
  uninstall() {
    // 注销abc模块
    store.unregisterModule(['abc'])
  }
}

组件中的使用

import abc from '../../store/test';

created() {
  // 挂载对应的 store 模块
  abc.install(this);
},
destroyed() {
  // 销毁对应的 store 模块
  abc.uninstall(this);
},
methods: {
  test() {
    this.$store.dispatch('abc/setTest', Math.random());
  }
}

参考

• 官网
• vuex 的动态注册方法 registerModule