javascript - 如何使Data和Vuex具有反应性？(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?(为什么会发生这种情况-如果从理论上讲date属性和存储库属性应该是反应性的？) 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.)(（在代码中直接写入存储属性似乎是一个非常麻烦的决定。）)   ask by Mike Kharkov translate from so

Answer 1

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.(您正在为width ， height等分配值 。) You assign to them the current values of the state variables.(您为他们分配state变量的当前值 。) 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:(如果您希望在商店的state发生变化时， chartStyleObject的属性发生变化，请直接在模板中映射state （或在使用状态时），或者创建一个计算式：) 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, }; }, }, }