What is “Vuex”?
Vuexis a library for managing global state
State?
Local StateGlobal State
Affects one component
E.g. entered user input,
show/ hide container
Affects multiple
components / entire app
E.g. user auth status,
shopping cart items
Data
Why Vuex?
Managing app-wide / global state can be difficult
App.vue(or similar
components) contain lots
of data and logic
It’s not always obvious
where data (state) gets
changed in which way
Accidental or missed
state updates are
possible
“Fat Components”UnpredictableError-prone
Outsourced state
management
With Vuex
Predictable state
management / flow
Clearly defined data flow:
Less errors
How VuexWorks
App-wide, central Data
Store/ State Store
Components
Mutations
How VuexWorks
App-wide, central Data
Store/ State Store
Components
Mutations
Getters
How VuexWorks
App-wide, central Data
Store/ State Store
Components
Mutations
GettersActions