Vuex Store Getter是什么？怎么用？

在Vue.js的生态中，Vuex是用于管理应用程序状态的一个重要工具，而Vuex Store Getter则是其中一个很实用的特性，那Vuex Store Getter究竟是什么呢？它就像是Vuex仓库（Store）里的“数据加工站”。

Vuex Store Getter的基本概念

我们知道，Vuex的Store里存放着各种状态（state），当我们需要从这些状态中获取一些经过处理的数据时，Getter就派上用场了，我们有一个存放用户列表的state，里面每个用户对象都包含了很多信息，而我们在页面上可能只需要展示用户的姓名列表，这时候，就可以通过Getter来对state中的用户列表进行处理，提取出姓名部分,然后供组件使用。

Vuex Store Getter的使用方法

**定义Getter**

在Vuex的Store中定义Getter非常简单，假设我们有一个名为`store.js`的文件来配置Vuex Store,代码如下：

```javascript import Vue from 'vue' import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({ state: { users: [ { id: 1, name: '张三', age: 20 }, { id: 2, name: '李四', age: 25 } ] }, getters: { userNames: state => { return state.users.map(user => user.name) } } })

export default store

<p>在上面的代码中，我们在`getters`对象里定义了一个`userNames`的Getter，它接收`state`作为参数，然后通过`map`方法从`state.users`中提取出每个用户的`name`属性，组成一个新的数组返回。</p>
<p>2. **在组件中使用Getter**</p>
<p>在Vue组件中使用Getter也很方便，有两种常见的方式：</p>
<p>方式一：通过`this.$store.getters`来访问，比如在一个Vue组件的`mounted`钩子函数中：</p>
```javascript
export default {
  mounted() {
    const userNames = this.$store.getters.userNames
    console.log(userNames) // 输出: ["张三", "李四"]
  }
}

使用`mapGetters`辅助函数,首先要在组件中导入`mapGetters`：

```javascript import { mapGetters } from 'vuex'

export default { computed: { ...mapGetters(['userNames']) }, mounted() { console.log(this.userNames) // 输出: ["张三", "李四"] } }

<p>通过`mapGetters`，我们可以把Getter映射到组件的计算属性中，这样在模板中也可以像使用普通计算属性一样使用它。</p>
#### 三、Vuex Store Getter的优势
<p>1. **数据的缓存与复用**</p>
<p>Getter会对计算结果进行缓存，只有当它所依赖的state发生变化时，才会重新计算，这在一些复杂的计算场景中非常有用，我们有一个根据多个state计算出来的复杂数据，如果每次组件重新渲染都重新计算，会浪费性能，而Getter的缓存机制可以避免这种不必要的计算，假设我们有一个`totalPrice`的Getter，它依赖于`state.products`（商品列表）和`state.discount`（折扣），只有当`products`或`discount`变化时，`totalPrice`才会重新计算。</p>
<p>2. **组件逻辑的简化**</p>
<p>把数据的处理逻辑放在Getter中，而不是在每个组件中重复编写，这样可以让组件的代码更加简洁，提高代码的可维护性，多个组件都需要展示用户的姓名列表，如果没有Getter，每个组件都要写一遍从`state.users`提取`name`的逻辑，而有了Getter，只需要在Getter中写一次，然后各个组件直接使用即可。</p>
#### 四、Vuex Store Getter的参数传递
<p>1. **传递额外参数**</p>
<p>Getter除了接收`state`作为第一个参数外，还可以接收`getters`作为第二个参数，这样就可以在一个Getter中引用其他Getter的结果。</p>
```javascript
const store = new Vuex.Store({
  state: {
    users: [
      { id: 1, name: '张三', age: 20 },
      { id: 2, name: '李四', age: 25 }
    ]
  },
  getters: {
    userNames: state => {
      return state.users.map(user => user.name)
    },
    userNamesLength: (state, getters) => {
      return getters.userNames.length
    }
  }
})

在上面的代码中，`userNamesLength`这个Getter通过`getters`参数引用了`userNames`Getter的结果,然后计算出姓名列表的长度。

**通过函数返回Getter**

有时候我们希望Getter能够接收更多的参数，这时候可以让Getter返回一个函数，我们有一个需求,根据用户ID获取用户姓名：

```javascript const store = new Vuex.Store({ state: { users: [ { id: 1, name: '张三', age: 20 }, { id: 2, name: '李四', age: 25 } ] }, getters: { getUserById: state => { return id => { return state.users.find(user => user.id === id)?.name } } } })

// 在组件中使用 export default { mounted() { const userName = this.$store.getters.getUserById(1) console.log(userName) // 输出: 张三 } }

<p>通过这种方式，我们就可以让Getter更加灵活地满足不同的业务需求。</p>
#### 五、
<p>Vuex Store Getter是Vuex中一个非常实用的特性，它可以帮助我们对Store中的状态进行加工处理，实现数据的缓存与复用，简化组件逻辑，还能灵活地传递参数，通过合理地使用Getter，我们可以让Vue.js应用的状态管理更加高效、清晰，提升开发效率和代码质量，无论是小型项目还是大型项目，掌握Vuex Store Getter的使用都能让我们在开发过程中事半功倍。</p>