阐述 Pinia 源码中 `getters` 的缓存机制，以及它们如何依赖于 `computed` 的惰性求值。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

Pinia Getters：缓存的秘密与 Computed 的惰性之美 (讲座模式)

大家好，我是今天的主讲人，很高兴能和大家一起探索 Pinia 中 getters 的奥秘。今天咱们不搞那些枯燥的理论，就用大白话，加上一点点代码，把 getters 的缓存机制和它与 computed 之间的关系，扒个底朝天。

先说个笑话：一个程序员去面试，面试官问：“你了解缓存吗？” 程序员答：“当然，我已经缓存了所有的面试题答案！” （希望大家也能缓存今天的内容，面试的时候用得上！）

那么，Pinia 的 getters，到底是个啥玩意儿呢？

什么是 Pinia Getters？

简单来说，getters 就是 Pinia store 中的计算属性。它们允许你从 store 的 state 中派生出一些数据，并且会进行缓存。这意味着，如果 state 没有发生变化，多次访问同一个 getter，它不会重新计算，而是直接返回缓存的结果。

这玩意儿有啥用？想象一下，你需要从一个巨大的用户列表里筛选出所有 VIP 用户。如果每次访问这个 VIP 用户列表都重新筛选一遍，那得多浪费资源啊！有了 getters，你就可以把这个筛选操作放在 getter 里，它会自动缓存结果，只有当用户列表发生变化时才会重新计算。

Getters 的基本用法

先来个简单的例子：

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  getters: {
    doubleCount: (state) => state.count * 2,
    tripleCount() {
      return this.count * 3; // 使用 this 访问 state
    },
    // 带有参数的 getter (需要返回一个函数)
    countPlus: (state) => (num) => state.count + num,
  },
  actions: {
    increment() {
      this.count++
    },
  },
})

在这个例子中，doubleCount 和 tripleCount 都是 getters。它们分别计算 count 的两倍和三倍。countPlus 是一个带参数的 getter，它返回一个函数，该函数接受一个数字作为参数，并将其加到 count 上。

注意:

getters 可以是一个函数，也可以是一个对象，对象里面可以包含多个函数。
getters 里的函数，第一个参数总是 state。
可以使用 this 访问 state，但是要注意作用域。

缓存机制：Computed 的功劳

getters 的缓存机制，要归功于 Vue 的 computed 属性。Pinia 在内部使用了 computed 来实现 getters 的缓存。

为了更好地理解这一点，我们先来回顾一下 computed 的特性：

惰性求值 (Lazy Evaluation): computed 属性只有在被访问时才会进行计算。也就是说，如果你定义了一个 computed 属性，但是从来没有访问它，那么它就不会执行计算。
缓存: computed 属性会缓存计算结果。只要依赖的响应式数据没有发生变化，多次访问 computed 属性，它都会直接返回缓存的结果，而不会重新计算。
依赖追踪: computed 属性会自动追踪它所依赖的响应式数据。当这些数据发生变化时，computed 属性会自动更新。

Pinia 利用了 computed 的这些特性，为 getters 提供了高效的缓存机制。

Getters 的缓存策略

当你在 Pinia store 中定义一个 getter 时，Pinia 会将其转换为一个 computed 属性。当您访问 getter 时，Pinia 实际上是在访问这个 computed 属性。

首次访问: 首次访问 getter 时，computed 属性会执行计算，并将结果缓存起来。
后续访问: 如果 getter 所依赖的 state 没有发生变化，后续的访问都会直接返回缓存的结果，而不会重新计算。
依赖更新: 如果 getter 所依赖的 state 发生了变化，computed 属性会自动更新，并重新计算结果，然后将新的结果缓存起来。

下面用一个表格来总结一下：

操作	结果
首次访问	执行计算，缓存结果
依赖未变	返回缓存结果，不重新计算
依赖更新	自动更新，重新计算，缓存新结果

深入源码：一窥究竟

虽然我们不需要完全理解 Pinia 的所有源码，但了解一些关键部分可以帮助我们更好地理解 getters 的缓存机制。

Pinia 内部使用 Vue 的 computed 函数来包装 getters。简单来说， Pinia 会遍历 getters 对象，并为每个 getter 创建一个 computed 实例。

下面是一个简化的示例，展示了 Pinia 如何使用 computed 来包装 getter：

import { computed } from 'vue';

function createGetter(store, getterName, getterFn) {
  // 使用 computed 创建一个计算属性
  store[getterName] = computed(() => {
    // 在这里执行 getter 函数，并返回结果
    return getterFn.call(store, store.$state);
  });
}

// 假设我们有这样一个 store 定义
const storeDefinition = {
  state: () => ({ count: 0 }),
  getters: {
    doubleCount: (state) => state.count * 2,
  },
};

// 创建 store 实例
const store = { $state: { count: 1 } };

// 遍历 getters 并创建计算属性
for (const getterName in storeDefinition.getters) {
  createGetter(store, getterName, storeDefinition.getters[getterName]);
}

// 现在，store.doubleCount 就是一个 computed 属性
console.log(store.doubleCount.value); // 输出 2 (首次计算)
store.$state.count = 2; // 修改 state
console.log(store.doubleCount.value); // 输出 4 (自动更新)
console.log(store.doubleCount.value); // 输出 4 (缓存结果)

在这个简化的示例中，createGetter 函数使用 computed 函数来创建一个计算属性，并将 getter 函数作为计算属性的 getter 函数。当访问 store.doubleCount.value 时，实际上是在访问 computed 属性的 value 属性。 computed 属性会自动处理缓存和依赖追踪。

注意： 这只是一个简化的示例，Pinia 的实际实现要复杂得多。但是，这个示例可以帮助我们理解 getters 的缓存机制背后的基本原理。

Getters 的陷阱：小心踩坑

虽然 getters 很强大，但也有些地方需要注意，避免踩坑：

避免在 Getters 中修改 State: getters 的主要目的是派生数据，而不是修改 state。如果在 getters 中修改 state，可能会导致意外的副作用，并且会破坏 Pinia 的响应式系统。
```
// 错误的做法
getters: {
  doubleCountAndIncrement(state) {
    state.count++; // 不要这样做！
    return state.count * 2;
  },
}
```
Getters 不要执行耗时操作: getters 应该尽可能地轻量级。如果 getters 中执行耗时操作，可能会导致页面卡顿。如果需要执行耗时操作，应该将其放在 actions 中。

Getters 的参数: 如果你需要传递参数给 getters，你需要返回一个函数。

getters: {
  countPlus: (state) => (num) => state.count + num,
}

// 使用方式
const store = useCounterStore()
console.log(store.countPlus(5)) // 输出 store.count + 5

循环依赖: 避免 getters 之间的循环依赖。例如，getterA 依赖于 getterB，而 getterB 又依赖于 getterA。这会导致无限循环，最终导致栈溢出。

总结

Pinia 的 getters 是一个强大的工具，可以帮助你从 store 的 state 中派生出数据，并提供高效的缓存机制。通过理解 getters 的缓存策略和它与 computed 之间的关系，你可以更好地利用 getters 来优化你的应用程序。

记住，getters 的本质是计算属性，利用了 computed 的惰性求值和缓存特性。在使用 getters 时，要避免修改 state，避免执行耗时操作，避免循环依赖。

希望今天的讲座能帮助大家更好地理解 Pinia 的 getters。下次面试的时候，别忘了把这些知识点“缓存”起来，给面试官一个惊喜！

最后，送给大家一句程序员界的至理名言： “Bug 是代码的一部分，要接受它，拥抱它，然后…解决它！”

谢谢大家！