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.
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 !