1. state
mapState({
count: state => state.count
// or
count: 'count'
// or
count(state) {
// 此时 this 为实例
return state.count + this.xxx
}
})
computed: {
// 使用对象展开运算符将此对象混入到外部对象中
...mapState(['count', 'num'])
}
2. getter
对 state 进行包装
// 定义
new Vuex.Store({
getters: {
len: state => {
state.todos.length
}
getTodoById: (state) => (id) => {
state.todos.find(i => i.id === id)
}
getMoneyByLen: (state, getters) => {
state.price * getters.len
}
}
})
// 调用
store.getters.len
store.getters.getTodoById(2)
// 同理
mapGetters({
...
})
3. mutation
修改 store 中的状态的唯一方法是提交 mutation，且为 同步 修改
// 定义
const store = new Vuex.Store({
mutations: {
addone(state, playload) {
state.count += playload. nums
}
}
})
// 调用
store.commit('addone' , {nums: 10})
// or
store.commit({type: 'addone' , nums: 10})
// 同理
mapMutatiobs
当需要在对象上添加新属性时，应该
- 使用
Vue.set(obj, 'newProp', 123) - 以新对象替换老对象:
state.obj = { ...state.obj, newProp: 123 }
使用产量代理 Mutation 事件名
const AddOne = 'addone'
...
[AddOne](state, playload) {
...
}
...
4. action
可以异步
// 定义
new Vuex.store({
actions: {
addone(context) {
// 调用 mutation 中的 addone
context.commit('addond')
},
add2({ commit, state }, playload) {
commit('addond', playload)
}
}
})
// 调用
store.dispatch('addone', playload)
// or
store.dispatch({ type: 'add2', ...playload })
// 同理
mapActions({
...
})
store.dispatch 后返回 promise，
故： store.dispatch('addone').then(log)
同理可以用在 actions 中 dispatch 另一个 action ,然后 .then(...)
5. module
// 定义
new Vuex.Store({
modules: {
a: {
namespaced: true,
state: {},
getters: {
len(state, getters, rootState, rootGetters) {...}
},
mutations: {},
actions: {
addone({state, commit, rootState, rootGetters }) {
dispatch('addone') // 'a/addone'
dispatch('addone', null, { root: true }) // 全局 'addone'
}
},
}
}
})
// 调用
state.a.xxx
state.getters['a/len']
state.dispatch['a/addone']
// map 函数
...mapState('some/nested/module', {
a: state => state.a,
b: state => state.b
})
...mapActions('some/nested/module', [
'foo',
'bar'
])
// or
const { mapState, mapActions } = createNamespacedHelpers('some/nested/module')
