当前位置：首页 > article >正文

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

article 2025/3/17 23:00:40

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对象重置为空对象等操作。