Question

我不确定为什么无法在我的Vuex存储中从此axios.get获取所需的数据。

我已将此action设置为commit，对我的mutation的更改如下：

      mutations: {
        updateShop: (state, payload ) => {
          state.shop = payload;
          return state.shop;
        }
      },
      actions: {
        getShop: ({ commit }) => {
          return axios.get("/admin/wine_app/shops").then(response => {
            debugger; // I DO have data here??
            commit('updateShop', response.data);
          });
        }
      }

但是当我用debugger停止它时，我确实有数据，但是当我在组件中使用getShop操作时，我看到了承诺被返回。

知道为什么吗？

编辑：它可能还没有准备好！我在控制台中看到了

    Promise {<pending>}
    __proto__: Promise
    [[PromiseStatus]]: "pending"
    [[PromiseValue]]: undefined

Answer 1

使操作 getShop 异步

getShop: async ({ commit }) => {
  const response = await axios.get("/admin/wine_app/shops");
  debugger; // I DO have data here??
  commit('updateShop', response.data);
}

等待您称之为操作的动作

await this.$store.dispatch('getShop')

在代码中使用 shop 状态道具

this.$store.state.shop

或使用mapState（如果您想使用多个状态道具）。

还要确保不要从突变返回任何数据。他们必须改变状态而不返回道具。

Answer 2

看到承诺的原因是因为您的操作正在返回axios调用。删除您的突变方法和操作方法中的return。

您的操作方法使用axios检索数据。然后，这会将您的突变与响应数据一起提交。您的变异方法会使用该数据更新状态。此时，您的state.shop已更新。

在Vue组件中，您可以通过将状态作为计算属性来访问该数据。

computed: {
    shop() {
        return this.$store.state.shop
    }

    // Or use mapState
    ...mapState(['shop'])
}

每当您的状态更改时，由于反应性，状态应该会在您的组件中更新。

Vuex Store中的Axios返回承诺而不是数据

2 个答案: