Код Vue перезаписывает вложенное свойство в магазине Vuex - PullRequest
0 голосов
/ 25 октября 2019

Я настроил хранилище Vuex, чтобы разделить состояние между различными компонентами. Один сотрудник случайно установил новое свойство в хранилище Vuex, не отправляя действие или не совершив мутацию, но ничего не произошло, и приложение продолжало работать. Есть ли способ предотвратить это?

Это структура магазина (упрощенно):

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    options: {},
  },
  actions: {
    setAttributes (context, payload) {
        context.commit('setAttributes', payload);
    },
    setPrice (context, payload) {
        context.commit('setPrice', payload);
    }
  },
  mutations: {
    setAttributes (state, payload) {
      state.options.width = payload.width;
      state.options.height = payload.height;
    },
    setPrice (state, payload) {
        state.options.price = payload.price;
      },
  },
  getters: {
    options: state => {
      return state.options
    }
  }
});

И это структура экземпляра Vue:

import Vue from 'vue';
import { mapGetters } from 'vuex';
import { store } from './store/store';

new Vue({
    el: '#app',
    store,
    computed: {
        ...mapGetters([
            'options',
        ])
    },
    mounted() {
        this.$store.dispatch('setAttributes', {
            width: 100,
            height: 80,
        });
    } 
  });

Чтобы изменить цену, я бы сделал что-то вроде:

this.$store.dispatch('setPrice', {
    price: 800,
});

Но мы выяснили, что это тоже возможно:

this.options.price = 800;

Есть лиспособ предотвратить это или мы должны избегать использования вложенных объектов в общем состоянии?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...