面试题：Vue计算属性在Vuex复杂状态管理下的依赖处理

Question

假设Vuex中有一个模块，包含一个状态对象state.userInfo，其中有多个属性如name、age、email等。现在要在组件中通过计算属性获取用户的完整信息展示字符串（格式如'姓名：[name]，年龄：[age]，邮箱：[email]'）。同时，当userInfo中的任何一个属性发生变化时，计算属性都要重新计算。请详细描述如何实现这种依赖关系，并给出核心代码。

Answer 1

1. 实现依赖关系的原理：
   • 在Vue组件中，计算属性会自动追踪其依赖的响应式数据。Vuex中的状态是响应式的，当state.userInfo中的任何属性发生变化时，由于userInfo整体是响应式的，计算属性会重新计算。
2. 核心代码：
   • 在Vue组件中：

<template>
  <div>
    <p>{{ userInfoStr }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    userInfoStr() {
      const { name, age, email } = this.$store.state.userInfo;
      return `姓名：${name}，年龄：${age}，邮箱：${email}`;
    }
  }
};
</script>

• 假设Vuex模块的基本结构（简化示例）：

// store/modules/user.js
const state = {
  userInfo: {
    name: 'John',
    age: 30,
    email: '[e-mail]'
  }
};

const mutations = {
  // 这里可以定义修改userInfo的mutations，比如
  UPDATE_USER_INFO(state, newInfo) {
    Object.assign(state.userInfo, newInfo);
  }
};

const actions = {};

export default {
  state,
  mutations,
  actions
};

• 在Vuex的index.js中注册该模块（假设）：

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

Vue.use(Vuex);

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