vuex action中{commit}解构赋值的写法

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来完成；