actions中提交mutations的方法我们普通用法是
context.commit(‘方法名’,‘参数’)
简写可以这样写
actions: {
//异步更新state
decrease({commit,state}){
let count = state.count-1
setTimeout(() => {
commit(types.DECREASE, count)
}, 2000)
}
}
actions: {
loadData(context, { page }) {
console.log(context)
const { commit } = context
axios
.get('http://localhost:3009/api/v1/products', {
params: {
page
}
})
.then(res => {
console.log(res.data)
commit('loadDataEnd', res.data)
})
}
}
代码第3行打印context,得到的结构是,context里面有一个commit属性,这个属性是个函数,所以commit里面是要提交的参数。
commit 操作会传递两个参数 type payload
- type表示mutation中的名字
- payload(载荷)表示参数
但一般代码是这样写的,直接把{ commit }写在函数里面。
actions: {
loadData({ commit }, { page }) {
axios
.get('http://localhost:3009/api/v1/products', {
params: {
page
}
})
.then(res => {
console.log(res.data)
commit('loadDataEnd', res.data)
})
}
}
context的话就相当于state的父亲,上一级,包含着state中的所有属性
context:{
state, 等同于store.$ state,若在模块中则为局部状态
rootState, 等同于store.$ state,只存在模块中
commit, 等同于store.$ commit
dispatch, 等同于store.$ dispatch
getters 等同于store.$getters
}
常规写法调用的时候会使用context.commit,但更多的是使用es6的变量解构赋值,也就是直接在参数的
位置写自己想要的属性,如:{commit}。
例如:
prev ({dispatch, state}) {
const list = state.listInfo.songList
if (state.listInfo.songIndex === 0) {
state.listInfo.songIndex = list.length
} else {
state.listInfo.songIndex–
}
const hash = list[state.listInfo.songIndex] && list[state.listInfo.songIndex].hash
dispatch(‘getSong’, hash)
},
dispatch:含有异步操作;而commit只是同步操作,都是提交 mutation,因为只能在mutation中才能够改变state中的值,然而mutation中只能进行同步操作,从而actions就出现了,actions允许异步和同步操作,但是对于actions的操作其实就是提交mutation来完成;