30Vuex-为啥可以进行缓存处理
目录
30、Vuex 为啥可以进行缓存处理
- Vuex 状态管理基础与缓存的关联
- Vuex 的核心概念 ：
- Vuex 主要由五个部分组成：
state、mutations、actions、getters和modules。其中，state是存储数据的地方，类似于一个全局的数据仓库。在这个菜谱 APP 的例子中，缓存的数据就存储在state中。 - 例如，我们可以在
state中定义一个对象来存储菜谱品类和菜谱的数据，像这样： javascript const state = { recipeCache: {} }; 这里的recipeCache就是用来缓存菜谱相关数据的对象，以品类下标作为键，对应的菜谱数据作为值。 - 组件与 Vuex 数据的交互 ：
- 组件可以通过
mapState、mapGetters等辅助函数来获取state中的数据。这样，不同的组件（如左边的菜谱品类展示组件和右边的菜谱展示组件）都能够访问和使用存储在state中的缓存数据。 - 比如，在一个组件中，我们可以这样获取缓存的菜谱数据：
javascript
import { mapState } from ‘vuex’;
export default {
computed: {
…mapState([‘recipeCache’])
}
};
这使得组件能够方便地获取
recipeCache中的数据，并根据这些数据进行渲染。
- 缓存处理的具体实现与优势
- 减少接口调用次数 ：
- 最初，每次切换菜谱品类时，都会调用接口获取数据。有了 Vuex 缓存后，在获取数据之前，可以先检查
state中的recipeCache对象是否已经存在对应的品类数据。 - 例如，有一个方法用于获取菜谱数据，改造后的代码可能如下：
javascript
async getRecipeData(categoryIndex) {
if (this.$store.state.recipeCache[categoryIndex]) {
return this.$store.state.recipeCache[categoryIndex];
}
// 如果缓存中没有数据，则调用接口获取
const data = await api.getRecipeData(categoryIndex);
this.$store.commit(‘setRecipeData’, { categoryIndex, data });
return data;
}
这里通过判断
recipeCache中是否存在数据来决定是否调用接口，从而避免了不必要的接口调用，减少了性能消耗。 - 数据共享与一致性 ：
- 由于 Vuex 的
state是全局共享的，多个组件可以访问相同的缓存数据。这确保了整个应用中菜谱数据的一致性。 - 比如，左边的菜谱品类组件和右边的菜谱展示组件都可以访问
recipeCache中的数据。当左边组件切换品类时，右边组件可以直接使用更新后的缓存数据进行渲染，而不需要重新获取数据，保证了数据在不同组件之间的同步和共享。
- 引用类型问题及深复制解决方案
- 引用类型在响应式系统中的挑战 ：
- 在 JavaScript 中，对象和数组是引用数据类型。在 Vue 的响应式系统中，如果只是修改了引用数据类型内部的属性，而没有改变数据的引用地址，Vue 可能无法检测到数据的变化。
- 例如，在
recipeCache中存储的菜谱数据是一个对象。如果直接修改这个对象的某个属性，像这样： javascript this.$store.state.recipeCache[categoryIndex].recipeName = ‘新菜谱名称’; Vue 可能不会触发组件的更新，因为数据的引用地址没有改变。 - 深复制的原理与应用 ：
- 深复制是创建一个全新的对象，它的所有属性和子属性都是原始对象的副本。在
mutation中进行深复制，可以确保每次更新数据时，数据的引用地址发生变化，从而触发 Vue 的响应式更新。 - 假设我们有一个
mutation用于更新recipeCache中的数据，可能会这样做： javascript mutations: { setRecipeData(state, { categoryIndex, data }) { // 使用深复制库（如lodash的cloneDeep） const newData = _.cloneDeep(data); state.recipeCache[categoryIndex] = newData; } } 通过这种方式，每次更新数据时，都会将全新的数据副本赋值给recipeCache，使得 Vue 能够正确地检测到数据的变化并更新组件。
- 缓存清除与生命周期钩子的配合
- 缓存清除的原因 ：
- 虽然缓存数据可以提高性能，但如果后台数据发生变化，而缓存没有更新，页面将显示旧的数据。因此，需要在适当的时候清除缓存，以便下次访问页面时能够重新获取最新的数据。
- 例如，当用户退出菜谱页面或者在一定条件下（如后台数据更新通知），应该清除
recipeCache中的数据。 - 生命周期钩子的选择 ：
- destroyed 生命周期钩子 ：在组件正常销毁时，
destroyed钩子会被触发。如果组件没有被Keep - alive包裹，这个钩子可以用来清除缓存。例如： javascript destroyed() { this.$store.commit(‘clearRecipeCache’); } - deactivated 生命周期钩子 ：当组件被
Keep - alive包裹时，组件在切换时不会被销毁，而是会触发deactivated钩子。在这种情况下，应该在deactivated钩子中清除缓存，以确保数据的及时更新。例如： javascript deactivated() { this.$store.commit(‘clearRecipeCache’); } 这里的clearRecipeCache是一个mutation，用于清除recipeCache中的数据，比如将recipeCache对象重置为空对象等操作。