javascript - vuex 注册模块中的未知突变类型

Question

我只想在 vuex 中创建动态注册模块，但它似乎不起作用。 这是我的商店文件

import Vuex from 'vuex'
import descriptionModule from './module/descriptionModule';
const {state: stateModule, getters, mutations} = descriptionModule;

const createStore = () => {
  return new Vuex.Store({
    state: {
      descriptions: [],
    },
    mutations: {
      addDescriptions(state, payload){
        state.descriptions.push(state.descriptions.length + 1);
        createStore().registerModule(`descriptionModule${payload}`, {
          state: stateModule,
          getters,
          mutations,
          namespaced: true // making our module reusable
        });
      }
    }
  })
};

export default createStore

这是我要注册的自定义模块

const state = () => {
  return {description: ''}
};
const getters = {
  description: (state) => state.description
};
const mutations = {
  updateDescription(state, payloads){
    state.description = payloads;
  }
};
export default {
  state,getters,mutations
}

然后这是我的自定义方法，它将调用 addDescriptions 突变并从 registeredModule 提交 updateDescription

beforeMount(){
  console.log("hahahaha");
  this.$store.commit('addDescriptions', this.id);
},
... more code ....
methods: {
      onType(editor, content){
        console.log(this.$store.state.a);
        console.log(this.$store.state);
        console.log(this.$store);
        this.$store.commit(`descriptionModule${this.id}/updateDescription`, content, {root: true})
      }
    }

每次 onType 调用，我都会在浏览器中收到错误 unknown mutation type: descriptionModuleeditor1/updateDescription。

目前我正在遵循此解决方案 link , 但它对我不起作用:(

任何人都可以解决这个问题，抱歉，英语不好

Answer 1

通过 beforeMount() 上的组件/页面调用 $store.registerModule():

beforeMount(){
      this.$store.registerModule(`descriptionModule${this.id}`, {
        state: stateModule,
        getters,
        mutations,
        namespaced: true // making our module reusable
      });
    },