vuex unknown mutation type in registered module

18,597

invoke $store.registerModule() via component/pages on beforeMount():

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

cahyowhy

Updated on June 04, 2022

Comments

  • cahyowhy
    cahyowhy almost 2 years

    i just wanna create dynamic registered module in vuex, but it seems doesnt work. this is my store file

    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
    

    and this is my custom module that i will registered

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

    and then this is my custom methods that will call addDescriptions mutation and commit updateDescription from registeredModule

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

    every onType called, i get an error unknown mutation type: descriptionModuleeditor1/updateDescription in browser.

    currently iam following this solution link , but it doesnt work for me :(

    can anyone solve this,,, sorry for bad english