vuex - 如何在 axios 调用后更新 Vuex 状态

Question

我正在构建一个 Nuxt 应用程序，我正在从我在本地主机上运行的节点后端获取一些数据。

我有一个插件 getApps.js

export default ({ store }) => {
    store.dispatch('getApps')
}

那是在我的 Vuex 中调用 getApps 操作

actions: {
  getApps (context) {
    const {commit, state} = context
    commit('setLoading', true)

    let url = `apps?limit=${state.loadLimit}&page=${state.page}`

    if (state.query)
      url = `${url}/q=${state.query}`

    this.$axios.get(url)
      .then((res) => {
        const apps = res.data.apps
        console.log(apps)
        commit('addApps', apps)
        commit('setPage', state.page + 1)
        commit('setLoading', false)

      })
  }
  ...

这里的 console.log 确实返回了应用程序列表，但是，在我的 addApps 突变之后

addApps (state, payload) {
  state.apps = payload
}

这是状态定义

state: () => ({
  apps: [],
  query: '',
  loading: false,
  filters: [],
  loadLimit: 25,
  page: 1,
  showFilters: true,
  currentUser: null,
  showLoginModal: false,
  showCreateAppModal: false
})

状态不会更新。据我所知，这是由于 Action 的异步性质。我也曾尝试将操作包装在异步周围并在 axios 调用前添加等待，但是，这没有用。

为什么会这样？我必须如何构建我的代码才能使其正常工作？

Answer 1

问题是，您没有意识到 Promise。您的操作调用了异步的 HTTP 请求，但您没有等待它。

然后，您也应该在插件部分了解 Promise。您的问题的解决方案非常简单，您只需要await。

plugins/getApps.js

export default async ({ store }) => {
    await store.dispatch('getApps')
}

store/...

您可以使函数async，并await axios，或者您可以从操作中返回Promise。

actions: {
  getApps (context) {
    ...
    return this.$axios.get(url)
      .then((res) => {
        const apps = res.data.apps

        commit('addApps', apps)
        ...
      })
  },
  ...
}

或

actions: {
  async getApps (context) {
    ...
    await this.$axios.get(url)
      .then((res) => {
        const apps = res.data.apps

        commit('addApps', apps)
        ...
      })
  },
  ...
}