Twitter Bootstrap
VueJS:
Vuex
Problem with components…
Component communication so far…
Props down
Events up
Issue: What if the same data is used by different child components?
There are problems with this….
A modification to the state in one component would then require passing up and down the data to align the state
This may also cause multiple re-renders, as state changes in multiple places…
There is not “one source of the truth”, state is duplicated
How do we solve this problem?
Container-presentation component style might solve this issue to some degree…
Container components manage state, use child presentation components that are stateless
Container components in this case, acting as a sort of store, are doing something components weren’t really intended for… i.e. not bad, but a bit of a hack
It also doesn’t end up scaling well… e.g. higher depth trees
…and there are actually some other problems….
We would like to coordinate our API/back-end access
Seperate business logic and presentation logic in this way
Vuex
Vuex
Another Vue-family library
Acts as a centralized data store for all app components
Allows data to only be accessed in pre-defined and predictable ways
Records all transactions for debugging purposes
Vuex is an example of a singleton design pattern
Used when something important is required by all components of a software architecture
5
Vuex
Vuex is a bit like a root Vue instance with no template, specialized to state management
state instead of data
getters instead of computed properties
actions instead of methods
mutations to change state, state changes are recorded and can be analyzed, rolled back
Vuex documentation: https://vuex.vuejs.org/
See examples on eLearn for how it works…
Decision to use Vuex is complex…
there are alternative approaches
Article: https://markus.oberlehner.net/blog/should-i-store-this-data-in-vuex/
What about components?
Wasn’t the whole point about components to separate concerns and modularize our app?
Vuex offers a module feature which gives back some separation of concerns:
https://vuex.vuejs.org/guide/modules.html
But even still… in Kevin’s subjective opinion… it’s a good, fair point… trade-off of using Vuex likely only worth it for medium-large size apps…
/docProps/thumbnail.jpeg