首先,确保Vuex状态只能通过mutations来修改,以防止组件直接修改状态数据。
mapState
和mapMutations
来获取和修改状态数据:import { mapState, mapMutations } from 'vuex';
export default {
computed: {
...mapState(['data']),
},
methods: {
...mapMutations(['updateData']),
// 在需要修改状态的地方调用updateData方法
changeData() {
this.updateData('new data');
},
},
};
// store.js
export const state = () => ({
data: 'initial data',
});
export const mutations = {
updateData(state, newData) {
state.data = newData;
},
};
这样,通过调用changeData
方法,可以更新Vuex状态中的数据,并确保组件不会直接修改状态数据。