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

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

  1. Vuex 状态管理基础与缓存的关联

    • Vuex 的核心概念

      • Vuex 主要由五个部分组成:statemutationsactionsgettersmodules。其中,state是存储数据的地方,类似于一个全局的数据仓库。在这个菜谱 APP 的例子中,缓存的数据就存储在state中。
      • 例如,我们可以在state中定义一个对象来存储菜谱品类和菜谱的数据,像这样:

        javascript

        const state = {
          recipeCache: {}
        };
        

        这里的recipeCache就是用来缓存菜谱相关数据的对象,以品类下标作为键,对应的菜谱数据作为值。
    • 组件与 Vuex 数据的交互

      • 组件可以通过mapStatemapGetters等辅助函数来获取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对象重置为空对象等操作。

http://www.kler.cn/a/588962.html

相关文章:

  • 【Leetcode 每日一题】3306. 元音辅音字符串计数 I
  • linux:环境变量,进程地址空间
  • 网络编程基础
  • 算法日记41:思维提升(最大gcd+好数组+简单的减法+球的颜色)
  • Cookie与Session详解
  • QuickAPI 和 DBAPI 谁更香?SQL生成API工具的硬核对比(一)
  • 从零实现区块链共识算法:用Python解锁去中心化世界的关键
  • 企业管理杂谈:产品经理的选拔和培养——企业产品创新发展的关键
  • Python核心语法-数据基本运算(一)
  • 玩转python:通俗易懂掌握高级数据结构:collections模块之defaultdict
  • Android第二次面试总结(项目拷打实战)
  • 线性代数(1)用 excel 计算鸡兔同笼
  • 0CTF 2016 piapiapia 1
  • Kafka的流量控制机制
  • 玩转python:通俗易懂掌握高级数据结构-collections模块之UserList
  • AI大语言模型LLM学习-基于Vue3的AI问答页面
  • 深入解析前后端分离架构:原理、实践与最佳方案
  • [IP]RGMII
  • 通过deepseek学习lua写网页
  • 人工智能与机器学习——系统学习规划