Question

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

我有一个插件getApps.js

SQLSTATE[42000]: Syntax error or access violation: 1066 Not unique table/alias: 'tbl_education_iteams' (SQL: select * from `tbl_education_iteams` inner join `tbl_education_iteams` on `tbl_education_groups`.`id` = `tbl_education_iteams`.`group`)

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

$education_iteam = DB::table('tbl_education_iteams')
->join('tbl_education_iteams','tbl_education_groups.id','=','tbl_education_iteams.group')
        ->select()
        ->get();

在我的addApps突变之后，此处的console.log确实确实返回了应用程序列表

export default ({ store }) => {
    store.dispatch('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)

      })
  }
  ...

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

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

Answer 1

问题是，您对Promise并不了解。您的操作调用了异步的HTTP请求，但您没有await。

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

plugins / getApps.js

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

商店/...

您可以使函数async和await成为轴距，或者可以从操作中返回Promise。

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

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

OR

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

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

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

1 个答案: