30、Vuex 为啥可以进行缓存处理

1. 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中的数据，并根据这些数据进行渲染。

2. 缓存处理的具体实现与优势

   • 减少接口调用次数：

     • 最初，每次切换菜谱品类时，都会调用接口获取数据。有了 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中的数据。当左边组件切换品类时，右边组件可以直接使用更新后的缓存数据进行渲染，而不需要重新获取数据，保证了数据在不同组件之间的同步和共享。

3. 引用类型问题及深复制解决方案

   • 引用类型在响应式系统中的挑战：

     • 在 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 能够正确地检测到数据的变化并更新组件。

4. 缓存清除与生命周期钩子的配合

   • 缓存清除的原因：

     • 虽然缓存数据可以提高性能，但如果后台数据发生变化，而缓存没有更新，页面将显示旧的数据。因此，需要在适当的时候清除缓存，以便下次访问页面时能够重新获取最新的数据。
     • 例如，当用户退出菜谱页面或者在一定条件下（如后台数据更新通知），应该清除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对象重置为空对象等操作。