Vuex
A state management pattern + library for Vue.js
Roberto Ortega (berto)
Lead Instructor @ Galvanize
I love vue :)
Vuex
- Why Vue.js and Redux?
- Introduction to Redux with Vue.js
- State and Store
- Mutators and Reducers
- Actions and Dispatchers
- Getters and Modules
- App Architecture and Mappers
- Vuex VS Redux, Flux, React
Vue.js is awesome
State
The data that defines the condition of an application.
Examples
Why Vuex?
- Great managing state and communication across components
- Ideal for large applications
- Can be a lot to get started
- So many files...
It is not required
Store
Basically a container that holds your application state
Demo
Simple Application Flow
Redux Application Flow
Mutators
The only way to actually change the state of a Vuex Store.
Think of them as events.
No Reducers
(from React planet)
Reducers are pure functions that take the previous state of an action and return the new state.
Mutation Types
It is common to use constants for mutation types
export const ADD_TO_CART = 'ADD_TO_CART'
export const CHECKOUT_REQUEST = 'CHECKOUT_REQUEST'
export const CHECKOUT_SUCCESS = 'CHECKOUT_SUCCESS'
export const CHECKOUT_FAILURE = 'CHECKOUT_FAILURE'
export const RECEIVE_PRODUCTS = 'RECEIVE_PRODUCTS'
Actions
Standard way to commit mutations.
Ideal for asynchronous operations.
Payloads
Additional data passed as arguments
// dispatch with a payload
store.dispatch('incrementAsync', {
amount: 10
})
// dispatch with an object
store.dispatch({
type: 'incrementAsync',
amount: 10
})
// MUTATIONS
mutations: {
increment (state, payload) {
state.count += payload.amount
}
}
store.commit('increment', {
amount: 10
})
Getters
Computed derived state from the store
getters: {
// ...
doneTodosCount: (state, getters) => {
return getters.doneTodos.length
}
}
store.getters.doneTodosCount // -> 1
Modules
Multiple stores into one store to keep the single tree structure
const moduleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}
const moduleB = {
state: { ... },
mutations: { ... },
actions: { ... }
}
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})
store.state.a // -> moduleA's state
store.state.b // -> moduleB's state
App Architecture
├── index.html
├── main.js
├── api
│ └── ... # abstractions for making API requests
├── components
│ ├── App.vue
│ └── ...
└── store
├── index.js # where we assemble modules and export the store
├── actions.js # root actions
├── mutations.js # root mutations
└── modules
├── cart.js # cart module
└── products.js # products module
Mappers
mapState(namespace?: string, map: Array<string> | Object): Object
mapGetters(namespace?: string, map: Array<string> | Object): Object
mapActions(namespace?: string, map: Array<string> | Object): Object
mapMutations(namespace?: string, map: Array<string> | Object): Object
// Example
...mapGetters({
products: 'cartProducts',
checkoutStatus: 'checkoutStatus'
}),
methods: mapActions([
'increment',
'decrement',
'incrementIfOdd',
'incrementAsync'
])
Last Thoughts
Vuex
vs
Redux, Flux, React
Links
-
https://github.com/vuejs/vuex
-
http://vuex.vuejs.org/en/
-
http://redux.js.org/docs/introduction/
-
http://facebook.github.io/flux/docs/in-depth-overview.html#content
Thank You
Contact:
roberto.ortega@galvanize.com
github.com/berto
linkedin.com/in/bertoort
Slack: @bertoort
Vuex
By Roberto Ortega
Vuex
- 1,124