各位观众，晚上好！我是今晚的主讲人，很高兴能和大家一起聊聊 Pinia 源码中 getters 的缓存机制，以及它与 computed 的微妙关系。
今天咱们不搞那些高深莫测的理论，就用大白话、结合代码，把这个看似复杂的问题扒个精光。
开场白：别小看 Getters，它们可是性能优化的秘密武器
在 Pinia 中，getters 的作用类似于 Vue 组件中的 computed 属性。它们允许我们从 state 中派生出新的数据，并对这些数据进行缓存，避免重复计算。 想象一下，如果你需要频繁地根据用户的购物车商品计算总价，如果没有 getters，每次访问总价都要重新计算一遍，这得多浪费资源啊！
getters 的缓存机制，正是 Pinia 性能优化的关键所在。 而它背后的功臣，就是 Vue 提供的 computed 属性，或者更确切地说，computed 的惰性求值特性。
第一幕：computed 的惰性求值：请开始你的表演
要理解 getters 的缓存机制，首先要搞清楚 computed 的惰性求值。 所谓惰性求值，就是“不到万不得已，绝不计算”。 只有在第一次访问 computed 属性时，才会进行计算。 之后，只要依赖的 state 没有发生变化，computed 就会直接返回缓存的结果，而不会重新计算。
举个例子：
import { ref, computed } from 'vue';
const count = ref(0);
const doubleCount = computed(() => {
console.log("计算 doubleCount"); // 仅在第一次访问时打印
return count.value * 2;
});
console.log("程序开始");
console.log("第一次访问 doubleCount:", doubleCount.value); // 打印 "计算 doubleCount" 和 计算结果
console.log("第二次访问 doubleCount:", doubleCount.value); // 直接返回缓存结果，不打印 "计算 doubleCount"
count.value = 1;
console.log("修改 count 的值");
console.log("第三次访问 doubleCount:", doubleCount.value); // 打印 "计算 doubleCount" 和 计算结果，因为 count 变化了在这个例子中，doubleCount 是一个 computed 属性，它依赖于 count 的值。 当我们第一次访问 doubleCount.value 时，会触发计算，并将结果缓存起来。 之后，只要 count 的值没有发生变化，再次访问 doubleCount.value 就会直接返回缓存的结果，而不会重新计算。
只有当我们修改了 count 的值之后，再次访问 doubleCount.value 才会重新触发计算。
这就是 computed 的惰性求值，它为 getters 的缓存机制奠定了基础。
第二幕：Pinia 中的 getters：computed 的华丽变身
在 Pinia 中，getters 本质上就是利用 computed 来实现的。 当我们定义一个 getter 时，Pinia 会将其包装成一个 computed 属性。
让我们看看 Pinia 源码中关于 getters 的部分 (简化版，仅供参考):
function defineStore(id, options) {
const store = {};
// ... 其他代码 ...
if (options.getters) {
store.$getters = {};
for (const getterName in options.getters) {
store.$getters[getterName] = computed(() => {
// `this` 指向 store 实例
return options.getters[getterName].call(store, store);
});
}
}
// ... 其他代码 ...
return store;
}从这段代码可以看出，Pinia 会遍历 options.getters 中的每一个 getter，并使用 computed 函数将其包装起来。 注意 options.getters[getterName].call(store, store) 这一行， 它确保了 getter 函数中的 this 指向当前 store 实例，并且将 store 实例作为第一个参数传递给 getter 函数。 这使得 getter 函数可以访问 store 的 state 和其他 getters。
所以，当我们访问 store.$getters.myGetter 时，实际上就是在访问一个 computed 属性。 它会利用 computed 的惰性求值特性，对 getter 的结果进行缓存。
第三幕：代码实战：用 Getters 提升性能
为了更好地理解 getters 的缓存机制，我们来做一个简单的例子。 假设我们有一个 store，其中存储了一个商品列表和一个筛选条件。 我们需要根据筛选条件，从商品列表中筛选出符合条件的商品。
import { defineStore } from 'pinia';
export const useProductsStore = defineStore('products', {
state: () => ({
products: [
{ id: 1, name: 'Apple', category: 'Fruit', price: 1 },
{ id: 2, name: 'Banana', category: 'Fruit', price: 0.5 },
{ id: 3, name: 'Orange', category: 'Fruit', price: 0.75 },
{ id: 4, name: 'Carrot', category: 'Vegetable', price: 0.25 },
{ id: 5, name: 'Broccoli', category: 'Vegetable', price: 1.5 },
],
filterCategory: 'Fruit',
}),
getters: {
filteredProducts: (state) => {
console.log("计算 filteredProducts"); // 只有在 filterCategory 或 products 变化时才打印
return state.products.filter(product => product.category === state.filterCategory);
},
// 假设还有其他复杂的 getter，依赖 filteredProducts
expensiveFilteredProducts: (state) => {
console.log("计算 expensiveFilteredProducts");
return state.filteredProducts.filter(product => product.price > 0.8);
}
},
actions: {
setFilterCategory(category) {
this.filterCategory = category;
},
},
});在这个例子中，我们定义了一个 filteredProducts getter，它会根据 filterCategory 的值，从 products 列表中筛选出符合条件的商品。 我们还定义了一个 expensiveFilteredProducts getter，它依赖于 filteredProducts，筛选出价格高于 0.8 的商品。
现在，让我们在组件中使用这个 store：
<template>
<div>
<p>Filter Category: {{ productsStore.filterCategory }}</p>
<button @click="productsStore.setFilterCategory('Fruit')">Show Fruits</button>
<button @click="productsStore.setFilterCategory('Vegetable')">Show Vegetables</button>
<h3>Filtered Products:</h3>
<ul>
<li v-for="product in productsStore.filteredProducts" :key="product.id">
{{ product.name }} - {{ product.category }} - ${{ product.price }}
</li>
</ul>
<h3>Expensive Filtered Products:</h3>
<ul>
<li v-for="product in productsStore.expensiveFilteredProducts" :key="product.id">
{{ product.name }} - {{ product.category }} - ${{ product.price }}
</li>
</ul>
</div>
</template>
<script setup>
import { useProductsStore } from './stores/products';
const productsStore = useProductsStore();
</script>当我们第一次加载组件时，会分别打印 "计算 filteredProducts" 和 "计算 expensiveFilteredProducts"。 之后，如果我们多次访问 productsStore.filteredProducts 和 productsStore.expensiveFilteredProducts，控制台中都不会再打印任何东西，因为它们的结果已经被缓存了。
只有当我们点击按钮，修改了 filterCategory 的值之后，才会重新计算 filteredProducts 和 expensiveFilteredProducts。 而且，由于 expensiveFilteredProducts 依赖于 filteredProducts，所以当 filteredProducts 重新计算时，expensiveFilteredProducts 也会重新计算。
这个例子充分展示了 getters 的缓存机制。 它可以避免重复计算，提高应用的性能。
第四幕：Getters 的高级用法：传参 Getter
除了基本的 getter 外，Pinia 还支持传参 getter。 传参 getter 允许我们向 getter 函数传递参数，从而实现更灵活的数据派生。
要实现传参 getter，我们需要返回一个函数。 这个函数接受参数，并返回计算后的结果。
import { defineStore } from 'pinia';
export const useProductsStore = defineStore('products', {
state: () => ({
products: [
{ id: 1, name: 'Apple', category: 'Fruit', price: 1 },
{ id: 2, name: 'Banana', category: 'Fruit', price: 0.5 },
{ id: 3, name: 'Orange', category: 'Fruit', price: 0.75 },
{ id: 4, name: 'Carrot', category: 'Vegetable', price: 0.25 },
{ id: 5, name: 'Broccoli', category: 'Vegetable', price: 1.5 },
],
}),
getters: {
productById: (state) => {
return (id) => {
console.log(`计算 productById(${id})`);
return state.products.find(product => product.id === id);
};
},
},
});在这个例子中，我们定义了一个 productById getter，它接受一个 id 参数，并返回对应 id 的商品。
在组件中使用这个 getter：
<template>
<div>
<p>Product Name: {{ product ? product.name : 'Not Found' }}</p>
<button @click="getProduct(1)">Get Product 1</button>
<button @click="getProduct(6)">Get Product 6</button>
</div>
</template>
<script setup>
import { useProductsStore } from './stores/products';
import { ref } from 'vue';
const productsStore = useProductsStore();
const product = ref(null);
const getProduct = (id) => {
product.value = productsStore.productById(id);
};
</script>当我们点击按钮时，会调用 getProduct 函数，它会调用 productsStore.productById(id) 来获取商品。 每次调用 productsStore.productById(id) 都会重新计算，因为每次传递的 id 参数都不同。
重点：传参 Getters 不具备缓存特性
需要注意的是，传参 getter 不具备缓存特性。 每次调用传参 getter，都会重新计算结果。 这是因为 computed 只能缓存无参函数的返回值。 对于需要传递参数的场景，我们需要自行实现缓存机制，或者使用其他更适合的方案，比如 actions。
第五幕：Getters 的依赖关系：牵一发而动全身
getters 之间可以相互依赖。 当一个 getter 依赖于另一个 getter 时，如果被依赖的 getter 的值发生了变化，那么依赖它的 getter 也会重新计算。
前面 expensiveFilteredProducts 的例子就是一个很好的说明。
这种依赖关系使得我们可以构建复杂的数据派生逻辑，而无需担心性能问题。 Pinia 会自动处理 getters 之间的依赖关系，确保只有在必要时才进行重新计算。
总结：Getters，性能优化的好帮手
通过今天的讲解，相信大家对 Pinia 源码中 getters 的缓存机制有了更深入的理解。 getters 本质上是利用 computed 的惰性求值特性来实现缓存的。 它可以避免重复计算，提高应用的性能。
在使用 getters 时，我们需要注意以下几点：
getters适用于从state中派生出新的数据，并对这些数据进行缓存的场景。getters之间可以相互依赖，构建复杂的数据派生逻辑。- 传参 getter 不具备缓存特性。
表格总结:
| 特性 | 说明 |
|---|---|
| 缓存机制 | 基于 computed 的惰性求值，仅在依赖的 state 发生变化时重新计算。 |
| 依赖关系 | getters 可以相互依赖，当被依赖的 getter 发生变化时，依赖它的 getter 也会重新计算。 |
| 传参 Getter | 返回一个函数，允许传递参数，但不具备缓存特性。 每次调用都会重新计算。 |
| 使用场景 | 从 state 派生数据，且需要缓存结果以提高性能的场景。例如，计算购物车总价、筛选商品列表等。 |
| 本质 | Pinia 的 getters 实际上是 computed 属性的封装，利用了 computed 的缓存特性。 |
希望今天的讲解对大家有所帮助！ 感谢各位的观看！