CODEWITHSUNDEEP
vue.jsvuejs2vue-componentvuex
Alex T
Alex T

Reputation: 3754

Changing getter value using state value in Vuex

I have this getter that get the value of one item in the state:

boxdata: state => {
      return state.boxchart.data
    },

Now I have another item in state that I use to change the value of getter

Currently I do this when component is mounted but it seems that the data sometimes loads but sometimes does not:

computed: {
      ...mapGetters(["boxdata"]),
      ...mapState(['reference_fc'])
    },

mounted() {
 this.boxdata[0].chartOptions.series[0].data[0]=this.reference_fc.NSR.values
}

So I wonder how can I ensure that the boxdata getter is already updated on the first time that the component loads?

Upvotes: 0

Views: 1419

Answers (2)

Decade Moon
Decade Moon

Reputation: 34286

Vue cannot detect array element assignments. This is explained in Caveats.

Try this instead:

this.$set(this.boxdata[0].chartOptions.series[0].data, 0, this.reference_fc.NSR.values)

Upvotes: 1

Pierre Said
Pierre Said

Reputation: 3820

You shouldn't mutate data using getters. You should use mutations.

Getters are only to get derived state based on store state. see here

In your store : 

mutations: {
  setBoxdata(state, value) {
     state.boxchart.data[0].chartOptions.series[0].data[0] = value;
  }
}

In your component : 

computed: {
  ...mapMutations("setBoxdata")
},
mounted() {
  this.setBoxData(this.reference_fc.NSR.values);
}

Upvotes: 1

Related Questions