Я настроил хранилище 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;
Есть лиспособ предотвратить это или мы должны избегать использования вложенных объектов в общем состоянии?