Now you have the project with the Vuex library, and we need to create our first store. In the following steps, we will create the Vuex store:
- Open the index.js from the src/store folder.
- In the state property, add a new key called counter and set the value to 0:
state: {
counter: 0,
},
- In the mutations property, add two new functions, increment and decrement. Both of the functions will have a state argument, which is the current Vuex state object. The increment function will increment the counter by 1 and the decrement function will decrement the counter by 1:
mutations: {
increment: (state) => {
state.counter += 1;
},
decrement: (state) => {
state.counter -= 1;
},
},
- Finally, in the actions property, add two new functions, increment and decrement. Both of the functions will have a deconstructed argument, commit, which is a function to call the Vuex mutation. In each function, we will execute the commit function, passing as a parameter the name of...