defineStore中的getters

在 Vuex 中， getters 是一种类似于计算属性的概念，用于从 store 中获取 state 中的数据并进行计算或转换。Getter 会将 store 中的 state 作为第一个参数传入，并返回计算后的结果。Getter 本身不会修改 state，而是返回一个新的值。

在 defineStore 中，可以使用 getters 对 state 中的数据进行封装和转换，使得在组件中使用时更加方便。定义 getter 的方式类似于定义 state，只需要在 defineStore 的 options 对象中添加一个 getters 对象，对象中每个属性都是一个 getter 函数。

例如，假设我们有一个状态为 count 的 state，我们可以定义一个名为 doubleCount 的 getter，用于获取 count 的两倍：

import { defineStore } from 'pinia'

export const useCounterStore = defineStore({
  id: 'counter',
  state: () => ({
    count: 0,
  }),
  getters: {
    doubleCount: state => state.count * 2,
  },
})

在组件中使用时，可以通过 $store.getters 访问 getter，例如：

<template>
  <div>
    Count: {{ $store.state.count }}<br>
    Double Count: {{ $store.getters.doubleCount }}
  </div>
</template>