Understanding Vuex mutations
The proper way to mutate the state in a Vuex application is with the help of mutations. Mutations are a very useful abstraction to decompose state changes in the atomic unit. In this recipe, we will explore just that.
Getting ready
This recipe can be completed without knowing too much about Vuex, but completing the previous recipe first is suggested.
How to do it...
Add Vuex as a dependency to your project (the CDN address is https://unpkg.com/vuex). I will assume that you are using JSFiddle to follow along; otherwise, just remember to put Vue.use(Vuex) before the store code.
The sample application we will build is to broadcast notifications to the users of the website.
The HTML layout looks as shown:
<div id="app">
<div v-for="(message, index) in messages">
<p style="cursor:pointer">{{message}}
<span @click="close(index)">[x]</span>
</p>
</div>
<input v-model="newMessage" @keyUp.enter="broadcast">...
