A question that I see come up from new users to Vue is, “What is Vuex?” Or, “Can someone ELI5 (explain like I’m five) what Vuex is?” and usually the response is something like “Vuex is a flux pattern for storing and retrieving data from a centralized global object store”. While technically correct, this answer always leaves me scratching my head and wondering what five-year-olds this person is hanging around? When I was five, I was more excited by Tonka trucks or playing soccer than learning about programming patterns.
When this question came up on Reddit, I spent some time to figure out about how I could explain Vuex to a five-year-old. An answer without the jargon and straight to the point. I feel a good analogy for Vuex is a vending machine.
If you’ve ever used a vending machine, you know that a user can buy items using buttons. The machine also needs to be stocked; someone needs to deliver those goods to the machine, and it needs a mechanism to get the user’s choice into their hands.
Let’s go over the different Vuex concepts and see how we can best relate them to the vending machine.
State
The Vuex concept of state is fundamentally what is in stock at the vending machine. This might be anything for chips to cookies to strings. Or even integers, arrays, or objects.
Vending machines can seemingly carry any number of items under the sun the same holds true for Vuex. Vuex can hold any JavaScript type. Keep in mind though that Vue’s reactivity caveats also hold true for Vuex.
Getters
Getters are how you access the contents of the vending machines. If you would like to buy the cookies, you insert your money and punch the buttons to get your item.
In Vuex getters are more powerful than simple vending machine buttons. Instead of getting back one item, you could select only the chocolate chip cookies. It would be possible to combine various pieces of your state to create something that didn’t even exist before.
Getters are a powerful way to shape your data to retrieve only items you want or to build new items from the data that exists in state.
If you are familiar with Vue’s computed properties, they are comparable to Vuex’s getters.
Mutations
When a vending machine is new or getting low, someone needs to come around a stock it full of goods. Mutations are how we fill up our Vuex vending machine.
When we receive our Vuex vending machine, we don’t want to change the contents as that may break Vue’s reactivity. You should make sure all of your fields, or items for sale, are set up ahead of time.
Actions
Sometimes when you go to fill your vending machine, you may not have all the items you need. Instead of leaving the vending machine to go get more items to fill it up, you call a friend (async request) to retrieve the items and bring them to you.
Once your friend arrives with the goods, you can now fill the vending machine with a mutation.
You can find this post and many more over on my personal blog drewtown.dev or consider following me on Twitter
Top comments (3)
Great analogy! Usually when I’m introducing Vuex to devs (and this is admittedly a bit more advanced than how I’d explain it to a 5 year-old) I start by explaining the problem Vuex is trying to solve. I would have explained how communication between components goes “props down events up”. Then I pose an example of “What if you had a ‘font size’ setting in your app? Because this would be needed everywhere, you’d have to add a ‘fontSize’ prop basically to all components, and pass it down all over the place. In the component in the settings page where the user can change the font size you’d need to emit some event, ‘changeFontSize’, and bubble it up parent by parent until you reach the top-level App component that’s storing this value in its data. This sounds terribly messy - suddenly everything in your app has this extra prop ‘fontSize’ even if it’s just an intermediary who has to pass it down to its children. How would we solve this problem? Maybe by using Vuex...”
My Vuex explanation then goes like this:
“Vuex is basically a big store of global variables that any component in your app can access. But we know that global variables are usually bad because anyone can change them willy-nilly leading to chaos, so Vuex puts restrictions on how these variables can be changed. We could store ‘fontSize’ in our Vuex store, and components who need it could bind straight to the value in the store. Other container components don’t need to unnecessarily pass down a ‘fontSize’ prop. Our settings page could update the font size in the store when the user changes it, and because Vuex state is reactive all the components using this value would immediately render with the new font size.”
Once they’ve understood this explanation (which I think helps to explain why and what Vuex is before worrying about the details of how you’d use it) I’d explain about how all updates to state must be done through defined mutations, and then go onto getters and actions.
The global variables analogy helped me understand more clearly. Thank you !
This is just great explaination ! Thank you , Have a great day !