前端面试题183（vuex 中getter特性）

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。在 Vuex 中，getters 是用于从 store 的 state 中派生出一些状态的一个特性，类似于计算属性。它们的主要用途是将 store 中的数据进行加工处理后返回，以便在组件中更方便地使用。

Getter 的特性：

1. 状态衍生: Getters 可以对 store 中的状态进行计算操作，返回一个基于状态的新值，而不会修改原始状态。这使得你可以根据需要从基本数据派生出复杂的衍生状态。

2. 缓存性: Getter 函数只有在其依赖的 state 发生改变时才会被重新计算，这意味着如果 getter 的依赖没有变化，多次访问该 getter 会返回相同的值，这有助于提升应用性能。

3. 映射到组件: 你可以将 getters 映射到 Vue 组件的计算属性中，这样就可以在模板中直接使用这些派生状态，使得组件更加简洁和易于维护。

4. 命名空间: 在模块化 Vuex store 中，getter 也可以是命名空间化的，这意味着你可以有相同名称但在不同模块中的 getters，这对于大型应用的管理非常有用。

示例代码：

假设我们有一个简单的 Vuex store，管理一个用户的状态：

const store = new Vuex.Store({
  state: {
    users: [
      { id: 1, name: 'Alice' },
      { id: 2, name: 'Bob' }
    ]
  },
  getters: {
    // 计算所有用户名字的 getter
    getAllUserNames: state => {
      return state.users.map(user => user.name);
    },
    // 获取特定ID的用户信息
    getUserById: (state) => (id) => {
      return state.users.find(user => user.id === id);
    }
  }
});

在 Vue 组件中使用 getter：

<template>
  <div>
    <ul>
      <li v-for="name in allUserNames" :key="name">{{ name }}</li>
    </ul>
    <p>User with ID 1: {{ userDetails.name }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    // 映射 getAllUserNames getter
    allUserNames() {
      return this.$store.getters.getAllUserNames;
    },
    // 映射 getUserById getter 并传递参数
    userDetails() {
      return this.$store.getters.getUserById(1);
    }
  }
};
</script>

在这个例子中，getAllUserNames 和 getUserById 是两个 getters，分别用于获取所有用户的姓名列表和根据ID获取用户信息。组件通过计算属性直接访问这些 getters，使得状态管理更加清晰和高效。