vue.js - 当我的 vuex getter 在观察者中返回空值时，如何从状态中获取值

Question

Getter 在观察者中返回空值。但是状态在突变中设置正确。

无法在控制台中签入 Vuex 开发工具，因为它显示“未检测到商店”。我已经通过在控制台中记录它来检查它

Vue文件：

---

computed: {
    ...mapGetters('listings', ['listingContracts']),
},

methods: {
    ...mapActions('listings', [
      'productBasedListings',
    ]),
},

onChange(product) {
      this.productBasedListings( product.id );
      console.log('LIST:', this.listingContracts); // Empty in observer
},

店铺 ：

---

state: {
    contracts: [],
},

getters: {
    listingContracts(state) {
      console.log('GETTER', state.contracts); // Empty in observer
      return state.contracts;
    },
},

mutations: {
    setListing(state, { lists }) {
      state.contracts = lists;
      console.log('AFTER MUTATION:', state.contracts); // Setting the value properly
    },
},

actions: {
    async productBasedListings({ commit }, { id, state }) {
      let listing = [];
      try {
        listing = await publicApi.listings(id);
        console.log('ACTION:', listing);

        commit({
          lists: listing,
          type: 'setListing',
        });
      } catch (e) {
        console.error(`Failed to change  #${id} state to  #${state}:\t`, e);

        throw e;
      }
    },
}

这里“Getter”没有任何值，但“After Mutation”我们有值。

Answer 1

因为最初存储变量是空的。值本身是在突变中设置的。因此在调用突变后出现。

现在要在触发突变后获取数据，请在您的方法中使用 async await，如下所示：

async onChange(product) {
      await this.productBasedListings( product.id ).then(() => {
      console.log('LIST:', this.listingContracts); 
      })
},