面试题：Vuex中如何实现模块间的数据共享与交互

1. Vuex中的配置

定义模块：
- 在src/store/modules目录下分别创建user.js和order.js文件（假设目录结构如此）。
- 在user.js中定义user模块：

const state = {
  userInfo: {
    memberLevel: ''
  }
};
const getters = {
  getMemberLevel: state => state.userInfo.memberLevel
};
const mutations = {
  SET_USER_INFO(state, info) {
    state.userInfo = info;
  }
};
const actions = {};
export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions
};

在order.js中定义order模块：

const state = {
  discountStrategy: ''
};
const getters = {};
const mutations = {
  SET_DISCOUNT_STRATEGY(state, strategy) {
    state.discountStrategy = strategy;
  }
};
const actions = {
  setDiscountStrategy({ commit }, memberLevel) {
    let strategy;
    if (memberLevel === 'gold') {
      strategy = '10% off';
    } else if (memberLevel ==='silver') {
      strategy = '5% off';
    } else {
      strategy = 'no discount';
    }
    commit('SET_DISCOUNT_STRATEGY', strategy);
  }
};
export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions
};

整合模块：在src/store/index.js中引入并整合这两个模块：

import Vue from 'vue';
import Vuex from 'vuex';
import user from './modules/user';
import order from './modules/order';

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    user,
    order
  }
});

2. Vue组件中的调用方式

更新用户信息：在相关的Vue组件（如UserInfo.vue）中更新用户信息：

<template>
  <div>
    <button @click="updateUserInfo">Update User Info</button>
  </div>
</template>

<script>
export default {
  methods: {
    updateUserInfo() {
      this.$store.commit('user/SET_USER_INFO', { memberLevel: 'gold' });
    }
  }
};
</script>

获取会员等级并设置订单优惠策略：在Order.vue组件中获取会员等级并设置订单优惠策略：

<template>
  <div>
    <p>Discount Strategy: {{ discountStrategy }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      discountStrategy: ''
    };
  },
  created() {
    const memberLevel = this.$store.getters['user/getMemberLevel'];
    this.$store.dispatch('order/setDiscountStrategy', memberLevel).then(() => {
      this.discountStrategy = this.$store.state.order.discountStrategy;
    });
  }
};
</script>

思路总结：

首先在Vuex中定义各个模块，user模块负责管理用户信息，order模块负责管理订单相关信息和优惠策略。
通过getters在user模块中暴露会员等级信息，order模块的actions通过获取user模块的会员等级来确定优惠策略并提交mutation更新自身状态。
在Vue组件中，通过$store.commit和$store.dispatch来触发Vuex中的mutation和action，从而实现模块间的数据共享与交互。

星途面试题库

面试题：Vuex中如何实现模块间的数据共享与交互

知识考点

面试题答案

1. Vuex中的配置

2. Vue组件中的调用方式