javascript - 在提交下一个突变之前处理 api 响应

Question

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

这里的问题是，在我得到 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')
    }
},

标签： javascriptvue.jsasynchronousvuex

Answer 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)
      }
  }