Vuex 3.x 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
Getter 接受 state 作为其第一个参数：
const store = new Vuex.Store({
state: {
todos: [
{ id: 1, text: '...', done: true },
{ id: 2, text: '...', done: false }
]
},
getters: {
doneTodos: state => {
return state.todos.filter(todo => todo.done)
}
}
})Getter 也可以接受其他 getter 作为第二个参数：
getters: {
// ...
doneTodosCount: (state, getters) => {
return getters.doneTodos.length
}
}在 Pinia 中定义常规函数时通过 this 访问到整个 store 的实例，可以通过 this 访问任何其他 getter：
export const useStore = defineStore('main', {
state: () => ({
counter: 0,
}),
getters: {
doubleCount: (state) => state.counter * 2,
doubleCountPlusOne() {
return this.doubleCount + 1
},
},
})Vuex 4.x 允许你也可以通过让 getter 返回一个函数，来实现给 getter 传参。在你对 store 里的数组进行查询时非常有用。
getters: {
// ...
getTodoById: (state) => (id) => {
return state.todos.find(todo => todo.id === id)
}
}在 Pinia 中将参数传递给 getter 也是这样的，您可以从 getter 返回一个函数以接受任何参数。
export const useStore = defineStore('main', {
getters: {
getUserById: (state) => {
return (userId) => state.users.find((user) => user.id === userId)
},
},
})注意，getter 在通过方法访问时，每次都会去进行调用，而不会缓存结果。
<template>
<p>User 2: {{ getUserById(2) }}</p>
</template>请注意，Pinia 中 store 是一个用 reactive 包裹的对象，这意味着不需要在 getter 之后写 .value，但是，就像 setup 中的 props 一样，我们不能对其进行解构：
export default defineComponent({
setup() {
const store = useStore()
// ❌ 这不起作用，因为它会破坏响应式
const { name, doubleCount } = store
name // "eduardo"
doubleCount // 2
return {
// 一直会是 "eduardo"
name,
// 一直会是 2
}
},
})为了从 Store 中提取属性同时保持其响应式，您需要使用 storeToRefs()。它将为任何响应式属性创建 refs。当您仅使用 store 中的状态但不调用任何操作时，这很有用：
import { storeToRefs } from 'pinia'
export default defineComponent({
setup() {
const store = useStore()
// `name` 和 `doubleCount` 是响应式引用
const { name, doubleCount } = storeToRefs(store)
return {
name,
doubleCount
}
},
})
