Large Application Patterns with Vuex Chapter 18How it works...
The balance in the bottom is like a summary of the global state. With Vuex, we were able to
affect other components by accessing the $store variable that gets injected into every
component by the Vuex plugin. You can easily imagine how to use this strategy in a big
application when you want to basically expand the scope of a variable beyond the
component itself.
Some of the states may be local, for example, if you need some animations or you need
some variables to show modal dialogs for the component; it's perfectly okay to not put
these values in the store. Otherwise, having a structured centralized state in one place helps
a lot. In the subsequent recipes, you'll use more advanced techniques to exploit the power
of Vuex better.
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.