在商店Vue js中更新后视图没有更新

Question

我有 Store，我有 actions 和 mutations

我的操作 loadProducts 调用了突变 setProducts，我在其中设置了 state 中的值，它工作正常

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);
  }
}

然后在我的组件中，我使用 ma​​pGetters 和 computed

获取数据

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

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

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

Answer 1

您是否应该使用mapState 而不是mapGetters 将状态products 直接映射到您的组件？您是否有一个名为 products 的 getter 可以做一些额外的工作？

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