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

Posted 2023-03-16

【中文标题】在商店Vue js中更新后视图没有更新

【英文标题】：View doesn't get updated after updates in store Vue js

【发布时间】：2019-08-29 10:27:43

【问题描述】：

我有 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);

【参考方案1】：

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

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

【讨论】：

它获取了新数据，但仍然没有更新视图

您有一个名为products2 的新计算函数是否有原因？只是为了记录吗？因为可以直接访问模板中映射的状态products。 <my-component :producst="products" />

您可以用您的 html 更新问题吗？