vuex的getters怎么使用

Vuex是一个专为Vue.js应用程序设计的状态管理模式，它允许你在应用的不同组件之间共享状态。其中，getters是Vuex的核心特性之一，用于从store中读取计算后的数据。getters通常是一些纯函数，它们接受state作为参数，并返回经过处理的数据。

要在Vuex store中使用getters，你需要按照以下步骤操作：

1. **定义getter**：在store的` getters `对象中声明一个getter。例如：

export default {
  state: ...,
  getters: {
    userDetails: (state) => {
      return state.users.find((user) => user.id === userId);
    }
  },
  ...
}

这里假设`users`是从state中获取到的用户数组，getter `userDetails`会根据传入的用户ID查找对应用户信息。

2. **在组件中访问**：在Vue组件中通过`this.$store.getters`来调用getter。比如：

<template>
  <div>
    <h1>{{ userDetails.name }}</h1>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters(['userDetails'])
  },
  // ...
}
</script>

这里使用了`mapGetters`辅助函数将getter映射到组件的计算属性上，可以直接在模板中使用`userDetails`。