After reading some articles on the topic, I am still struggling to understand it completely.
This is my current issue:
I have a component in Nuxt
<a @click="openMenu">Open Menu</a>
<div v-if="isUserNav"> ... </div>
Essentially, I want to change the state of `isUserNav` to true when clicked by using Vuex store.
In my component, I have access to the state:
import {
mapState
} from ‘vuex’
export default {
computed: {
...mapState({
isUserNav: state => state.isUserNav
})
},
methods: {
openMenu () {
this.$store.commit('openMenu')
},
}
}
Here is the Vuex store configuration:
import Vuex from 'vuex'
const createStore = () => {
return new Vuex.Store({
state: () => ({
// USER NAV COMPONENT
isUserNav: false,
testData: "Hello"
}),
actions: {
async openMenu() {
this.state.isUserNav = true;
}
}
})
}
export default createStore
I seem to be encountering an error where I can't run the action as intended. Even though I can access the action, it is throwing:
[vuex] unknown mutation type: openMenu
error in console.
Where did I go wrong and what steps do I need to take next?