I am trying to create a dynamic registered module in Vuex, but unfortunately it's not working as expected. Below 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
Here is the custom module that I will register:
const state = () => {
return {description: ''}
};
const getters = {
description: (state) => state.description
};
const mutations = {
updateDescription(state, payloads){
state.description = payloads;
}
};
export default {
state,getters,mutations
}
Next, these are the custom methods that will call the addDescriptions mutation and commit the updateDescription from the 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 time onType is called, I encounter an error saying "unknown mutation type: descriptionModuleeditor1/updateDescription" in the browser.
I have tried following this solution mentioned in this link, but it has not worked for me :(
If anyone can help solve this issue, I would greatly appreciate it. Apologies for any language errors in my explanation.