在提交下一个突变之前处理 api 响应答案

【问题标题】：Handle api response before committing next mutation在提交下一个突变之前处理 api 响应
【发布时间】：2020-11-07 15:22:23
【问题描述】：

创建我的 Vue 应用程序时，我调用 requestUserProfile 操作。我的目标是从 "/api/user/" 获取 api 调用，并将数据设置为调用 setUserProfile 突变之前的状态。

这里的问题是，在我获得 api 响应之后，setUserProfile 突变在我什至将数据设置为状态之前就被调用了。是否可以在触发 setUserProfile 之前完全执行 requestUserInfo ？

这是我正在使用的代码：

state() {
    return {
        requestUser: null,
        profile: null
    }
},
mutations: {
    setUserInfo (state) {
        apiService("/api/user/")
        .then(data => {
            state.requestUser = data["username"]
        })
    },
    setUserProfile (state) {
        let endpoint = "api/profile/";

        if (state.requestUser) {
            apiService(endpoint)
            .then(data => {
                state.profile = data
            })
        }
    }
},
actions: {
    async requestUserInfo ({ commit }) {
        commit('setUserInfo')
    },
    async requestUserProfile ({ dispatch, commit }) {
        await dispatch('requestUserInfo') // wait for `requestUserInfo` to finish
        commit('setUserProfile')
    }
},

【问题讨论】：

标签： javascript vue.js asynchronous vuex

【解决方案1】：

您似乎误解了突变和操作的用途。突变不能是异步的，只能修改状态。与它们相反，动作可以是异步的，可以请求一些数据，然后可以使用突变将这些数据置于状态。

所以你的所有代码应该如下所示：

mutations: {
  setUserInfo (state, username) {
    state.requestUser = username
  },
  setUserProfile (state, profile) {
    state.profile = profile
  }
...
actions: {
  async requestUserInfo ({ commit }) {
     const data = await apiService("/api/user/")
     commit('setUserInfo', data["username"])
  },
  async requestUserProfile ({ dispatch, commit, state }) {
      await dispatch('requestUserInfo') // wait for `requestUserInfo` to finish
      let endpoint = "api/profile/";
      if (state.requestUser) {
        const data = await apiService(endpoint)
        commit('setUserProfile', data)
      }
  }

【讨论】：