STATE MANAGEMENT
WITH VUEX
Tech Lead
Contributor
Nam Dau
What is state management?
"State management refers to the management of the state of one or more user interface controls"
-- Wikipedia
- A centralized data store to determine current working status
- Ensures data consistency across all the components
- It's all about data-flow management
In Vue context
Do I really need it?
As you app grows....
- Components share common state
- Different actions mutate the same state
- The business logic is spread across many different components
- The parents become more tightly coupled to their children
There are some ways....
- Passing props
- Global event bus
- A single source of truth
Vuex architecture
Key Concepts
- State (aka the store)
- Mutations
- Actions
- Getters
State
- Single state tree
- Support modularity with modules
- Make debugging the state straightforward
Mutations
- The only way to mutate state
- Each mutation has a string type and a handler
- Works like event registration
- Still following Vue's reactivity rules
Actions
- Functions that commit mutations
- Asynchronous operations
Getters
- Computed properties for store
Modules
Plugins
- Exposes hooks for each mutation
- Receives the store as the only argument
- Not allowed to directly mutate state
Demo
Thanks!
github.com/namdau
twitter.com/namdq