Loading
Roberto Ortega
This is a live streamed presentation. You will automatically follow the presenter and see the slide they're currently on.
A state management pattern + library for Vue.js
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'
// 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: {
// ...
doneTodosCount: (state, getters) => {
return getters.doneTodos.length
}
}
store.getters.doneTodosCount // -> 1
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
├── 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
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'
])
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
roberto.ortega@galvanize.com
github.com/berto
linkedin.com/in/bertoort
Slack: @bertoort