Vuex链接异步操作

时间:2020-08-14 05:33:03

标签: javascript typescript vue.js async-await vuex

我正在考虑将动作链接起来并在存储中提交顺序的突变,其中后面动作的参数取决于前面的参数。但是,在使用await异步操作时,状态不会按顺序更新,并使顺序填充为null;

动作:

const actions: ActionTree<State, any> = {

async [Actions.One]({ commit, dispatch}, id){
  const res = await API.GET(URL, id);
  commit(Mutations.MutOne, res);
},
async [Actions.Two]({ commit, dispatch}, oneType){
  console.error("Action two begins");
  const res = await API.GET(URL, id);
  commit(Mutations.MutTwo, res); // this gives me error
},
async [Actions.All]({state, commit, dispatch}), id){
  await dispatch(Actions.One, id);
  await dispath(Actions.Two, state.one);
  console.error("All API Call begins");
  const res = await API.GET(URL, state.two); //this gives me error
  commit(Mutations.All, res); 
}
}

突变:

const mutations: MutationTree<State> = {
  [Mutations.MutOne]: (state: State, payload) => {
    state.one = {
      ...state.one,
      [payload.key]: payload,
    };
    console.error('mutation in one done');
  },
   [Mutations.MutTwo]: (state: State, payload) => {
    state.one = {
      ...state.two,
      [payload.key]: payload,
    };
    console.error('mutation in two done');
  },
  [Mutations.All]: (state: State, payload) => {
    state.one = {
      ...state.all,
      [payload.key]: payload,
    };
    console.error('mutation in all done');
  },
}

在挂接的钩子中调用this.all()将触发“所有操作”,但是控制台给我错误的有序日志。

动作二是在“变异一”完成并进入状态之前调度的。“动作二”中的一个引用为我提供了状态默认值,而不是“动作一”中的res。

异步函数应该返回一个promise,在等待apromise解决之前,下一行不会执行?

0 个答案:

没有答案
相关问题