How to make Data and Vuex reactive?

Question

There is such a code:

<template>

  <div class="chart"
       v-bind:style="chartStyleObject">

  </div>

</template>

<script>

export default{

data () {
  return {

    chartStyleObject: {
      width: this.$store.state.chartStyleObject.width,
      height: this.$store.state.chartStyleObject.height,
      marginTop: this.$store.state.chartStyleObject.marginTop,
      marginRight: this.$store.state.chartStyleObject.marginRight,
      marginBottom: this.$store.state.chartStyleObject.marginBottom,
      marginLeft: this.$store.state.chartStyleObject.marginLeft,
    },
  },
}
}

And such a repository:

const axios = require("axios");
export const state = () => ({
  chartStyleObject: {
    height: '247px',
    width: '500px',
    marginTop: '15px',
    marginRight: '0px',
    marginBottom: '0px',
    marginLeft: '15px',
  },
});


export const mutations = {
    changeChartDraggableEventState (state, EventState) {
        state.chartDraggableEventState = EventState;
    },
    changeChartHeight (state, height) {
        state.chartStyleObject.height = height;
    },
    changeHeightWrapper (state, HeightWrapper) {
        state.chartStyleObject.HeightWrapper = HeightWrapper;
    },
    changeWidthWrapper (state, WidthWrapper) {
        state.chartStyleObject.WidthWrapper = WidthWrapper;
    },
    changeChartMarginLeft (state, MarginLeft) {
        state.chartStyleObject.marginLeft = MarginLeft;
    },
    changeChartMarginTop (state, MarginTop) {
        state.chartStyleObject.marginTop = MarginTop;
    },
};

Problem:
If I change the state of the repository through mutations, then the properties of the repository change correctly. But! The data properties on which the same storage properties are tied for some reason does not change. (Despite the fact that repository property was changed)

My question is:
Why does this happen - if dates property, as well as repositories property, in theory, should be reactive? And which approach is the most correct in this case to solve this problem? (writing directly the storage properties in the code seems like a very cumbersome decision.)

acdcjunior · Accepted Answer · 2019-11-28 21:33:44Z

2

When you assign the values in

chartStyleObject: {
  width: this.$store.state.chartStyleObject.width,          // here
  height: this.$store.state.chartStyleObject.height,
  marginTop: this.$store.state.chartStyleObject.marginTop,
  marginRight: this.$store.state.chartStyleObject.marginRight,
  marginBottom: this.$store.state.chartStyleObject.marginBottom,
  marginLeft: this.$store.state.chartStyleObject.marginLeft,
},

you are assigning values to the width, height and so on. You assign to them the current values of the state variables.

If you want the properties of chartStyleObject to change whenever the store's state changes, either map the state directly in the template (or wheverever you use it) or create a computed:

export default {
    computed: {
      chartStyleObject() {
        return {
          width: this.$store.state.chartStyleObject.width,
          height: this.$store.state.chartStyleObject.height,
          marginTop: this.$store.state.chartStyleObject.marginTop,
          marginRight: this.$store.state.chartStyleObject.marginRight,
          marginBottom: this.$store.state.chartStyleObject.marginBottom,
          marginLeft: this.$store.state.chartStyleObject.marginLeft,
        };
      },
    },
}

answered Nov 28, 2019 at 21:33

acdcjunior

136k37 gold badges341 silver badges312 bronze badges

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

3 Comments

Mikhail Krivosheev Over a year ago

Do I need usual data in this case and how should I change these computed properties from other methods in the future? If I just change my data properties against these computed properties - my app is not working.

Mikhail Krivosheev Over a year ago

Do I need watches in this case?

acdcjunior Over a year ago

If you use the store, you have to change the store, you can't change the computed properties. The computed properties should be automatically updated once the state changes. You shouldn't need watches.

Collectives™ on Stack Overflow

How to make Data and Vuex reactive?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related