here's one for example, per this article: "If you find yourself doing one or more of these things then that's a good indicator that you should start using Vuex to manage the complex states in your project:
When you keep passing a lot of props to a component
Have the parent component keep track of the state of a child so that the siblings may interact with each other via the parent When the props passed to a component are not used by that component itself but needed for another component nested inside it"
I think of state stored in Vuex as just a global variable, because it is. I think if you do some googling around and reading you will find that global variables should be a last resort to use, they shouldn't be used because they are more convenient (ie. "passing a lot of props to a component", 'having to pass to a grandchild component'), they should be used for when multiple components share a common state and achieving your objective without creating anti-patterns would be otherwise unavoidable.
also, as a design principle, you only want to expose the minimal possible information to each component. (eg. the users component shouldn't have access to the inventory component variables) Storing variables in the global state is exposing every component to that variable.
Um, I'm not sure if you read the beginning of the article, but this is from the podcast episode where Chris Fritz gave these tips. I'm not sure whether a core Vue team member would give incorrect recommendations. It's probably because I didn't interpret them correctly. Let me listen to the podcast episode again and verify it.
heΒ₯Β yes I understand that it's from a vue core team member. I applaud you for being so studious and learning so much. I am not trying to be mean or anything here. But I am just saying that the problems I pointed out were SOLID principles that were created by the pioneers of coding and engineering, not by me. I will take the pioneers' advice any day over some modern day framework creator.
Yes, I understood your intention wasn't to call me out on it. I thought you hadn't listened to the podcast because there are some who don't like listening to podcasts π . After all, that was my original intention behind writing this article, the tips given in that podcast and topics discussed were too good to not be shared. I didn't intend to be arrogant about what I wrote. It is, after all, something I repeated from a different source.
Anyways, I listened to the podcast again carefully and I feel what I wrote was somewhat too general. Although what I wrote is close to what Chris said, there are some words I failed to remember and omitted them. I'll rephrase those 3 points to better reflect what Chris meant when he recommended using Vuex in those situations.
From listening to the episode again, I think the main reason he recommended using Vuex instead of using props and event bus in those situations is that with Vuex, it's easy to keep track of changes in the state since Vue DevTools provides a way to trace the changes in the state.
I agree that using global variables is bad, and using global state is more so. I think even if Vuex is okay to use in a situation, it will be better to only have the components that require the Vuex state to access it.
I am grateful you pointed this out. Otherwise, I wouldn't have paid close attention to this. Listening to the podcast again and reading your comments made me realize I should be careful not to use Vuex just because it looks like a good situation to use it.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Some of the things that are recommended in this article are not good. Beware
Can you give some examples?
here's one for example, per this article: "If you find yourself doing one or more of these things then that's a good indicator that you should start using Vuex to manage the complex states in your project:
When you keep passing a lot of props to a component
Have the parent component keep track of the state of a child so that the siblings may interact with each other via the parent
When the props passed to a component are not used by that component itself but needed for another component nested inside it"
I think of state stored in Vuex as just a global variable, because it is. I think if you do some googling around and reading you will find that global variables should be a last resort to use, they shouldn't be used because they are more convenient (ie. "passing a lot of props to a component", 'having to pass to a grandchild component'), they should be used for when multiple components share a common state and achieving your objective without creating anti-patterns would be otherwise unavoidable.
also, as a design principle, you only want to expose the minimal possible information to each component. (eg. the users component shouldn't have access to the inventory component variables) Storing variables in the global state is exposing every component to that variable.
Um, I'm not sure if you read the beginning of the article, but this is from the podcast episode where Chris Fritz gave these tips. I'm not sure whether a core Vue team member would give incorrect recommendations. It's probably because I didn't interpret them correctly. Let me listen to the podcast episode again and verify it.
heΒ₯Β yes I understand that it's from a vue core team member. I applaud you for being so studious and learning so much. I am not trying to be mean or anything here. But I am just saying that the problems I pointed out were SOLID principles that were created by the pioneers of coding and engineering, not by me. I will take the pioneers' advice any day over some modern day framework creator.
Yes, I understood your intention wasn't to call me out on it. I thought you hadn't listened to the podcast because there are some who don't like listening to podcasts π . After all, that was my original intention behind writing this article, the tips given in that podcast and topics discussed were too good to not be shared. I didn't intend to be arrogant about what I wrote. It is, after all, something I repeated from a different source.
Anyways, I listened to the podcast again carefully and I feel what I wrote was somewhat too general. Although what I wrote is close to what Chris said, there are some words I failed to remember and omitted them. I'll rephrase those 3 points to better reflect what Chris meant when he recommended using Vuex in those situations.
From listening to the episode again, I think the main reason he recommended using Vuex instead of using props and event bus in those situations is that with Vuex, it's easy to keep track of changes in the state since Vue DevTools provides a way to trace the changes in the state.
I agree that using global variables is bad, and using global state is more so. I think even if Vuex is okay to use in a situation, it will be better to only have the components that require the Vuex state to access it.
I am grateful you pointed this out. Otherwise, I wouldn't have paid close attention to this. Listening to the podcast again and reading your comments made me realize I should be careful not to use Vuex just because it looks like a good situation to use it.