Vuex 没有反应

Question

我试图从直接在视图中使用我的 API 的绑定过渡到将所有逻辑放在 Vuex 中。我以前只是使用 Vuex 来存储实体并将列表调用作为一个动作包含在内。例如，在我看来，我发出了 myAPI.create(...) 调用，然后调度了 list 操作。这很好用。

转换后，我的视图对存储更新没有反应：

store/modules/vehicles.js:

import vehiclesAPI from "@/api/vehicles";

const vehicles = {
  namespaced: true,

  state: {
    vehicles: []
  },

  mutations: {
    SET_VEHICLES(state, vehicles) {
      state.vehicles = vehicles;
    }
  },

  actions: {
    list({ commit }) {
      return new Promise((resolve, reject) => {
        vehiclesAPI
          .list()
          .then(response => {
            const vehicles = response.data;
            commit("SET_VEHICLES", vehicles);
            resolve(response);
          })
          .catch(e => {
            reject(e);
          });
      });
    },

    create({ commit }, vehicle) {
      return new Promise((resolve, reject) => {
        vehiclesAPI
          .create(vehicle)
          .then(response => {
            resolve(response);
          })
          .catch(e => {
            reject(e);
          });
      });
    }
  },

  getters: {
    vehicles: state => (state.vehicles ? state.vehicles : [])
  }
};

export default vehicles;

在我的视图中，我映射了我的动作和吸气剂。要创建车辆，我调用

this.create(this.vehicle);
this.list();

将 Vue DevTools 用于 Chrome 我注意到，来自 list 操作的突变 SET_VEHICLES 不包含创建的车辆。但是，在发出重新加载后，它起作用了。

我做错了什么？

有趣的是，在 setTimeout 中调用 this.list() 时它起作用了。但是当我使用 create() 承诺 then 或 finally.

时它不起作用

Answer 1

是因为动作默认是异步的，你应该这样使用：

this.create(this.vehicle)
    .then( () => this.list() )

Vuex 没有反应

Vuex not reactive

vue.js

vue-component

vuex

vuex-modules

vue-reactivity