defineStore()中的getter

在 Vuex 中，getter 是一个类似于计算属性的概念，它允许你从 store 中的 state 中派生出一些状态，这些状态可以在组件中使用。

在 `defineStore` 中，getter 用于定义 store 的 getter。getter 可以接受两个参数：state 和 getters。state 表示 store 中的 state，getters 表示 store 中的 getter。通过 getter，我们可以对 state 进行一些计算或者过滤，然后将计算的结果返回给组件。

例如，我们可以定义一个 getter 来计算购物车中商品的总价格：

import { defineStore } from 'pinia'

export const useCartStore = defineStore({
  id: 'cart',
  state: () => ({
    items: []
  }),
  getters: {
    totalPrice(state) {
      return state.items.reduce((total, item) => total + item.price * item.quantity, 0)
    }
  }
})

在上面的示例中，我们定义了一个名为 `totalPrice` 的 getter，它通过 reduce 方法对购物车中的商品进行计算，返回商品的总价格。在组件中，我们可以使用 `$store` 来访问 `totalPrice` getter：

<template>
  <div>总价：{{ totalPrice }}</div>
</template>

<script>
import { useCartStore } from '@/store/cart'

export default {
  setup() {
    const cartStore = useCartStore()

    return {
      totalPrice: cartStore.totalPrice
    }
  }
}
</script>