1. 前言
- 最近找工作 遇到了一些有意思的面试题记录下来
- vuex 2 个模块之间修改数据,这个平常开发 确实没用到,而且也破坏了
vuex单向数据流的原则,可能导致数据状态管理的混乱- 但是既然问了应该就有解决办法 所以简单写下
2. 条件
- vuex 中 有user 和 common 2 个模块
3. comm 模块
// common.js (common module) const state = { dataToBeModified: '', }; const mutations = { SET_DATA(state, payload) { state.dataToBeModified = payload; }, }; export default { namespaced: true, state, mutations, };
4. user 模块
- 在user模块的
actions中，使用commit来触发common模块的mutations- 从而修改
common模块的数据。
// user.js (user module) const actions = { updateUserCommonData({ commit }, payload) { commit('common/SET_DATA', payload, { root: true }); }, }; export default { namespaced: true, actions, };
5. 组件使用
import { mapActions } from 'vuex'; export default { // Component options... methods: { ...mapActions('user', ['updateUserCommonData']), updateCommonData() { this.updateUserCommonData('New data'); }, }, };
