I have an architectural question: currently I am building a Vue application which has a container element (OrderForm) and several child elements: e.g. DrinksSelector, FoodSelector and PriceEstimate.
When you select something in the FoodSelector, the PriceEstimate component should update its price estimate. Similar for DrinksSelector.
I'm using VueX for state management, so there's a single source of truth.
According to your article (if I understand correctly) you advise to keep these Food and DrinkSelector 'dumb' and put business logic into the container OrderForm.
In my opinion, you are creating a coupled link between your container and its children. In order to avoid this, what I do is make the children 'smart' by letting them dispatch VueX actions directly and render from the VueX store (instead of its parent's props).
The biggest benefit is that you avoid placing business logic into your containers but move this to your VueX store and its actions. A component thus truly becomes a 'view' and the VueX actions the 'controller'. Components get ridiculously small and easy to understand this way.
This is an approach I'm taking for a new project so it's definitely not battle-tested. What are your thoughts on moving business logic from containers into the store?
Thanks!
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.
Thanks for the great tips Christopher!
I have an architectural question: currently I am building a Vue application which has a container element (OrderForm) and several child elements: e.g. DrinksSelector, FoodSelector and PriceEstimate.
When you select something in the FoodSelector, the PriceEstimate component should update its price estimate. Similar for DrinksSelector.
I'm using VueX for state management, so there's a single source of truth.
According to your article (if I understand correctly) you advise to keep these Food and DrinkSelector 'dumb' and put business logic into the container OrderForm.
In my opinion, you are creating a coupled link between your container and its children. In order to avoid this, what I do is make the children 'smart' by letting them dispatch VueX actions directly and render from the VueX store (instead of its parent's props).
The biggest benefit is that you avoid placing business logic into your containers but move this to your VueX store and its actions. A component thus truly becomes a 'view' and the VueX actions the 'controller'. Components get ridiculously small and easy to understand this way.
This is an approach I'm taking for a new project so it's definitely not battle-tested. What are your thoughts on moving business logic from containers into the store?
Thanks!