vuex store doesn't update component

Question

I\'m new to vue, so I\'m probably making a rookie error.

I have a root vue element - raptor.js:

const Component = {
el: \'#app\',
store,
data: {
             


        

Answer 1

UPDATE

Figured it out myself. Just had to replace the components data part with a computed method:

data:

data: {
  productList: store.state.productlist
}

and replace it with.

computed: {
    productList () {
        return store.state.productlist;
    }
},

Answer 2

You are calling the store into the productList data property in the wrong way.

You can try it:

data: {
  productList: $store.state.productlist
}

Otherwise you have to import store in each component that are using the store.

Answer 3

data only work once on component before render, so you can use computed instead. like above answer, or you can use mapstate

import {mapstate} from 'vuex'
...
computed: mapstate({
  productList: state => state.productList
})

Answer 4

First - use getter to do this mapGetters, also you need to watch this property somehow, you can set store subscription or just with watch method trough component.

 this.$store.subscribe((mutation, state) => {    
   if (mutation.type === 'UPDATE_DATA') {
      ...
   }
 }