Я установил магазин 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;

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

0
Giorgio Tempesta 25 Окт 2019 в 00:18

1 ответ

Лучший ответ

Поскольку ответ был дан в комментариях Филом, я процитирую его здесь и приму ответ:

Включите строгий режим в вашем магазине ~ vuex.vuejs.org/guide/strict.html

0
Giorgio Tempesta 31 Янв 2020 в 14:34