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.
This recipe can be completed without knowing too much about Vuex, but completing the previous recipe first is suggested.
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">...