Question

我有 Store ，其中有操作和变异

我的操作 loadProducts 调用了变量 setProducts ，我在状态中设置了值，并且效果很好

const actions = {
  loadProducts({ commit }, accountId ) {
    Products.where( { accountId: accountId } ).all().then((products) => {
      commit("setProducts", {accountId: accountId, products: products.data})
    });
  },
}
const mutations = {
  setProducts(state, {accountId, products}) {
    Vue.set(state, 'products', products);
  }
}

然后在我的组件中，使用 mapGetters 和 computing

获取数据

 computed: {
   ...mapGetters([
     'products'
   ]),
   products2() {
     console.log(this.products)
     return this.products;
   }}

一切正常，但是然后我尝试更新数据，它也有效，我得到了更新状态-在Vuex控制台中，我可以看到我的更新状态和新数据，但是视图本身不会被更新-所以我拥有重新加载页面，以查看数据出现。我也通过动作，突变和吸气剂来完成它，就像这样：

replace() {
   Vue.set(state, key, val);
}

Answer 1

是否应该使用mapState而不是mapGetters直接将状态products映射到组件？您是否有一个名为products的吸气剂，它需要做一些额外的工作？

...mapState([
  'products'
]),

在商店Vue js中更新后，视图未更新

1 个答案: