Within my Vuex state, there is a specific number stored. Utilizing a computed property, I am able to access and utilize this number in my Vue component successfully. In the same Vue component, there exists a method that triggers a mutator function within the Vuex store. This mutator function's purpose is to alter the value of number to a random numerical value.
Despite these functionalities being set up, I have encountered issues when attempting to activate the mutator in the Vuex store. Upon trying to trigger the mutator, an error message presents itself:
[vuex] unknown mutation type: changeNumberThe changeNumber function is responsible for changing the value of number to a random number within the Vuex store.
The code provided below demonstrates the implementation. While direct access to the store is achievable using this.$store.state.number from the Vue component, the activation of the changeNumber mutator with
this.$store.commit('changeNumber')this.$store.commit('mutation').
var store = new Vuex.Store({
state: {
number: -1
},
getters: {
getNumber: function(state) {
return state.number;
}
},
mutations: {
changeNumber: function(state) {
state.number = Math.floor(Math.random() * 10);
}
}
});
var vm = new Vue({
el: '#app',
store: store,
computed: {
number: function() {
return this.$store.getters.getNumber;
}
},
methods: {
generate: function() {
this.$store.commit('changeNumber');
}
}
});
The accompanying HTML code is as follows:
<div v-cloak id="app">
<button v-on:click="generate">Generate</button>
<h3>{{ number }}</h3>
</div>
A live demonstration of this code can be accessed through the JSFiddle link provided here, if necessary. Any assistance offered would be greatly appreciated.