Как сделать Data и Vuex реактивными?

320

30 ноября 2021, 01:20

Всем привет:
Есть такой код:

<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, 
    }, 
  }, 
} 
}

И такое хранилище:

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; 
    }, 
};

Проблема:
Если я изменяю(в данном случае не важно каким(угодно) абстрактным способом) состояние хранилища через мутации - то св-ва хранилища изменяются корректно.
Но!
Свойства data на которое завязаны те же св-ва хранилища почему то не изменяется.
(Не смотря на то что св-ва хранилища изменены)

Вопрос:
Почему это происходит - если св-ва даты как и хранилища по идее должны быть реактивны?
И какой подход является самым правильным в данном случае для решения данной задачи? (писать напрямую св-ва хранилища в коде - кажется каким то очень громоздким решением.)

Answer 1

Есть некоторые сложности с отслеживанием данных объекта. По этому, рекомендую вместо:

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

сделать:

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

И все сопутствующие изменения в getters, actions, mutations.

В компоненте же данные предложу выводить в посредством computed и watch, для случая, где необходим вывод большого количества getters, предлагаю использовать mapGetters, например так:

import { mapGetters } from 'vuex'
export default {
  // ...
  computed: {
    ...mapGetters([
         'height',
         'width',
         'marginTop',
         'marginRight',
         'marginBottom',
         'marginLeft'
    ])
  }
  // ...
}