VueJS reactivity: Replace an array with data

Question

I still have trouble why certain ways of changing data work, while others do not. I tried this example:

    watch: {
      '$store.state.linedata': function() {this.redraw()}
    },
    methods: {
      redraw() {
        this.chartOptions.series[0].data = this.$store.state.linedata
      }
    },
    data() {
      return {
        chartOptions: {
          chart: {
            type: this.type
          },
          series: [{
            data: this.$store.state.linedata,
            name: "Test Series",
            color: this.color
          }]
        }
      }
  }

This setup works, whenever I change the linedata in my store, the component gets updated. However, for me it would be more intuitive to update the data like this, without referencing this.chartOptions.series[0].data:

  redraw() {
    this.$store.state.linedata = [1,2,3,4,5,6]
  }

This will update the state correctly, but however not cause to update the component with the new data. Why does the second way not work and is my first way the correct way to do it? I feel like I am missunderstanding some core concept here.What would a best practice look like?

Thank you!

Gaetan C. · Accepted Answer · 2020-08-05 13:50:06Z

1

From the Vuex docs you can read:

The only way to actually change state in a Vuex store is by committing a mutation

It means that you should not try to do this.$store.state.linedata = [1,2,3,4,5,6]. It may throw an error depending on your Vuex settings in the console by the way. Instead, create a mutation like so:

mutations: {
  updateLineDate(state, lineDate) {
    state.lineData = lineData;
  }
}

And then call:

this.$store.commit("updateLineDate", [1, 2, 3, 4, 5, 6]);

To automatically update your chart's data, I would suggest creating a computed property in your Vue component. To make it reactive to changes, map your attribute using mapState:

import { mapState } from "vuex";

// ...

computed: {
  ...mapState("lineData"),
  chartData() {
    return {
      chart: {
        type: this.type
      },
      series: [{
        data: this.lineData,
        name: "Test Series",
        color: this.color
      }]
    }
  }
}

Then remember to provide chartData to your chart component instead of chartOptions in my example.

edited Aug 5, 2020 at 13:50

answered Aug 5, 2020 at 13:44

Gaetan C.

1,91416 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Data Mastery Over a year ago

thank you for the great explanation, I will have a look at all that stuff :-)

Gaetan C. Over a year ago

Glad to help :)

Data Mastery Over a year ago

I changed code but it still does not update, only the data gets updated. Also changed the Chartoptions to chartdata of course :-(

Gaetan C. Over a year ago

Which chart library do you use? Highcharts wrapper for Vue? If so, did you set the updateArgs property like to <highcharts :options="chartData" :update-args="[true, true, { duration: 1000 }]" />

Data Mastery Over a year ago

don´t know if that solved the problem, but now it works :-)

Collectives™ on Stack Overflow

VueJS reactivity: Replace an array with data

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related