View doesn't get updated after updates in store Vue js

Question

I have Store, where I have actions and mutations

My action loadProducts calls the mutation setProducts, where I set values in state and it works fine

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

And then in my component I get the data, using mapGetters and computed

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

Everything works, but then I try to update the data, it also works, I get updated state - in Vuex console I can see my updates state and new data, but the view itself won't be updated - so i Have to reload the page, to see the data appears. I also do it via actions, mutations and getters, in mutations it looks like this:

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

gaz gaz · Accepted Answer · 2019-04-08T10:01:25

Should you be using mapState instead of mapGetters to directly map the state products to your component? Do you have a getter called products that does some extra work?

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

View doesn't get updated after updates in store Vue js

1 Answers