vuex---action

一、用途

不可直接改变状态，用来包含异步操作

二、定义

actions: {
    // context对象包含一下属性:
    // state，相当于store.state,在模块中为局部状态
    // rootState，只存在于模块当中
    // commit，相当于store.commit
    // dispatch，相当于store.dispatch
    // getters，相当于store.getters
    // rootGetters，//只存在于模块当中
    increment (context, payload) {
      context.commit('increment', payload)
    }
}

三、访问

//action是通过store.dispatch方法触发的
//option里可以有root：true，它允许在命名空间模块里提交根的action
dipacth(type:string, payload?:any, options?: Object)

// 以载荷形式分发
store.dispatch('incrementAsync', {amount: 10}, {root: true})

// 以对象形式分发
store.dispatch({
  type: 'incrementAsync',
  amount: 10
})

四、利用辅助函数访问action

//字符串数组形式
...mapActions(namespace?:string, ['xxx1','xxx2']);
//对象形式
...mapActions(namespace?:string, {
    add: 'increment'
})
//组件中this.add({amount:10}),相当于store.dispatch('increment',{amount: 10})

五、组合action

// action的处理函数返回的是promise
// 在一个action中可以调用另一个action来完成更加复杂的异步流程
actions: {
  async actionA ({ commit }) {
    commit('gotData', await getData())
  },
  async actionB ({ dispatch, commit }) {
    await dispatch('actionA') // 等待 actionA 完成
    commit('gotOtherData', await getOtherData())
  }
}