vue3-vuex持久化实现

vue3-vuex持久化实现

  • 一、背景描述
  • 二、实现思路
    • 1.定义数据结构
    • 2.存值
    • 3.取值
    • 4.清空
  • 三、具体代码
    • 1.定义插件
    • 2.使用插件
  • 四、最终效果

一、背景描述

有时候我们可能需要在vuex中存储一些静态数据,比如一些下拉选项的字典数据。这种数据基本很少会变化,所以我们可能希望将其存储起来,这样就减少了请求的数量。
但是在每个位置都进行存储,好像是在做重复的逻辑,所以我们可以考虑将这个功能提取出来,作为一个插件使用。
注意:建议不要滥用持久化存储,因为这可能导致你不能获取到最新的数据,只建议在一些长期不会变化的数据中使用。

二、实现思路

做到持久化存储,那就要在页面销毁之前将值存到storage中,页面初始化的时候,再将值取到vuex中进行数据初始化

1.定义数据结构

我们首先要规定哪些值需要存储,因为我们没必要持久化存储大部分的vuex数据,所以没必要进行全量存储。
我这里将数据结构定义为数组:

const storageItem = [
  {
    storageType: 'local', // 存储类型:local或者session
    storageKey: 'name', // 存储的key
    storageValue: () => Store.getters.getName || '', // 需要存储的值,也可以用 () => Store.state.name 这种形式
    storeMutations: 'SET_NAME' // vuex设置值时的mutations,用于页面刷新完成之后初始化vuex
  }
]

每多一个需要持久化存储的内容,就增加一个元素即可。

2.存值

在页面销毁前存值我们可以直接在window的beforeunload回调中进行即可

window.addEventListener('beforeunload', () => {
      storageItem.forEach(item => {
        const storage =
          item.storageType === 'session' ? sessionStorage : localStorage
        storage.setItem(item.storageKey, item.storageValue())
      })
    })

也可以在vue组件的onUnmounted回调中进行存储,但是这样就需要你在vue组件中执行这个逻辑了。当然你也可以考虑将逻辑封装为hooks。

3.取值

在页面渲染前从storage中取到值,并且初始化vuex。
有一点可能要注意,我们从后端获取一些全局数据时,一般会在routerBeforeEach中进行接口调用。所以不建议在window的load回调中调用。我们执行初始化尽量在routerBeforeEach之前执行,这样我们就可以判断vuex如果存在值,就不用再调用接口了。
我这里在main.js中调用插件时执行:

storageItem.forEach(item => {
      const storage =
        item.storageType === 'session' ? sessionStorage : localStorage
      let storageValue = storage.getItem(item.storageKey)
      try {
        storageValue = JSON.parse(storageValue as string)
      } catch {}
      if (storageValue) {
        if (item.storeMutations) {
          Store.commit(item.storeMutations, storageValue)
        }
      }
    })

4.清空

我们可以提供一个清空的方法,便于某些时候清空所有的存储(如果担心数据时效性,可以设置一个时间,超出这个时间段之后就全部清空)

  storageItem.forEach(item => {
    const storage =
      item.storageType === 'session' ? sessionStorage : localStorage
    storage.removeItem(item.storageKey)
  })

三、具体代码

1.定义插件

新建一个storeStorage.js

import Store from '@/store'
/**
 * 统一移除存储的vuex数据
 */
export const removeStoreStorage = () => {
  storageItem.forEach(item => {
    const storage =
      item.storageType === 'session' ? sessionStorage : localStorage
    storage.removeItem(item.storageKey)
  })
}
// 持久化存储相应vuex数据
const storageItem = [
  {
    storageType: 'local', // 存储类型:local或者session
    storageKey: 'name', // 存储的key
    storageValue: () => Store.getters.getName || '', // 需要存储的值
    storeMutations: 'SET_NAME' // vuex设置值时的mutations,用于页面刷新完成之后初始化vuex
  }
]
export default {
  install() {
    this.getStoreStorage()
    this.setStoreStorage()
  },
  /**
   * 页面销毁前,存储数据
   */
  setStoreStorage() {
    window.addEventListener('beforeunload', () => {
      storageItem.forEach(item => {
        const storage =
          item.storageType === 'session' ? sessionStorage : localStorage
        storage.setItem(item.storageKey, item.storageValue())
      })
    })
  },
  /**
   * 页面刷新时,重新加载存储的vuex数据
   */
  getStoreStorage() {
    storageItem.forEach(item => {
      const storage =
        item.storageType === 'session' ? sessionStorage : localStorage
      let storageValue = storage.getItem(item.storageKey)
      try {
        storageValue = JSON.parse(storageValue as string)
      } catch {}
      if (storageValue) {
        if (item.storeMutations) {
          Store.commit(item.storeMutations, storageValue)
        }
      }
    })
  }
}

2.使用插件

main.js中引入,并使用

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import storeStorage from '@/util/storeStorage'
import store from './store'
const app = createApp(App)
app.use(store).use(router).use(storeStorage).mount('#app')

其中vuex中index.js定义:

import { createStore } from 'vuex'

export default createStore({
  state: {
    name: '',
    age: ''
  },
  getters: {
    getName: state => state.name,
    getAge: state => state.age
  },
  mutations: {
    SET_NAME(state, name) {
      state.name = name
    },
    SET_AGE(state, age) {
      state.age = age
    }
  },
  actions: {},
  modules: {}
})

四、最终效果

app.vue

<template>
  <input type="text" v-model="$store.state.name"/>
</template>

<style lang="scss">
#app {
  color: #2c3e50;
}
</style>
<script setup lang="ts">
</script>

在这里插入图片描述
输入内容再刷新页面就会发现值被缓存了。

注:插件、routerBeforeEach和window.load执行顺序

router.beforeEach((to, from, next) => {
  console.log('routerBeforeEach')
  next()
})
window.addEventListener('load', () => {
  console.log('load')
})

插件中的部分代码

 /**
   * 页面刷新时,重新加载存储的vuex数据
   */
  getStoreStorage() {
    storageItem.forEach(item => {
      const storage =
        item.storageType === 'session' ? sessionStorage : localStorage
      let storageValue = storage.getItem(item.storageKey)
      try {
        storageValue = JSON.parse(storageValue as string)
      } catch {}
      if (storageValue) {
        if (item.storeMutations) {
          Store.commit(item.storeMutations, storageValue)
        }
      }
    })
    console.log('getStoreStorage')
  }

执行结果:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/101003.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

webassembly003 ggml ADAM (暂记)

Adam优化器的工作方式是通过不断更新一阶矩估计和二阶矩估计来自适应地调整学习率&#xff0c;并利用动量法来加速训练过程。这种方式可以在不同的参数更新方向和尺度上进行自适应调整&#xff0c;从而更有效地优化模型。 https://arxiv.org/pdf/1412.6980.pdf 参数 这些参数…

CSS实现白天/夜晚模式切换

目录 功能介绍 示例 原理 代码 优化 总结 功能介绍 在网页设计和用户体验中&#xff0c;模式切换功能是一种常见的需求。模式切换可以为用户提供不同的界面外观和布局方案&#xff0c;以适应其个人偏好或特定环境。在这篇博客中&#xff0c;我们将探索如何使用纯CSS实现一…

Python所有方向的学习路线图!!

学习路线图上面写的是某个方向建议学习和掌握的知识点汇总&#xff0c;举个例子&#xff0c;如果你要学习爬虫&#xff0c;那么你就去学Python爬虫学习路线图上面的知识点&#xff0c;这样学下来之后&#xff0c;你的知识体系是比较全面的&#xff0c;比起在网上找到什么就学什…

数据结构——哈希表

哈希表 这里没有讲哈希表底层的概念&#xff0c;什么转红黑树&#xff0c;什么链表的&#xff0c;这篇文章主要讲的是如何用C实现哈希表&#xff0c;以及哈希表的基本概念。后面我会出一篇文章来讲C中hashmap中的底层逻辑的知识。 哈希表的概念 哈希表是一种数据结构&#xff0…

Unity3D 如何在ECS架构下,用Unity引擎进行游戏开发详解

前言 Unity3D是一款强大的游戏引擎&#xff0c;它提供了丰富的功能和工具&#xff0c;可以帮助开发者快速构建高质量的游戏。而Entity Component System&#xff08;ECS&#xff09;是Unity3D中一种新的架构模式&#xff0c;它可以提高游戏的性能和可扩展性。本文将详细介绍在…

一米ip流量池系统

PC端快速切换移动网络IP 支持全网通sim卡槽&#xff0c;国内三大运营商IP池动态切换&#xff0c;实现真实移动端IP切换。从此换IP再也不用vpn或代理&#xff0c;一个设备搞定 1.兼容国内电信&#xff0c;移动&#xff0c;联通三网通的sim卡4G连接&#xff0c;快速稳定2.可直接…

layui框架学习(40:数据表格_主要事件)

Layui数据表格模块主要通过各类事件响应工具栏操作、单元格编辑或点击等交互操作&#xff0c;本文学习table数据表格模块中的主要事件及处理方式。   头部工具栏事件。通过代码“table.on(‘toolbar(test)’, function(obj))”获取lay-filter属性为test的数据表格的头部工具栏…

MySQL中日期、时间直接相减的坑

前言 在牛客网上写一道 SQL 题时&#xff0c;需要计算两个日期之间相隔的秒数&#xff0c;我在写的时候直接将两个日期进行相减&#xff0c;得出来的值却不是相差的秒数。 情景再现 我在 MySQL 中进行了测试&#xff0c;得出的结论是&#xff1a;如果日期类型直接相减&#…

LeetCode 面试题 02.04. 分割链表

文章目录 一、题目二、C# 题解 一、题目 给你一个链表的头节点 head 和一个特定值 x&#xff0c;请你对链表进行分隔&#xff0c;使得所有 小于 x 的节点都出现在 大于或等于 x 的节点之前。 你不需要 保留 每个分区中各节点的初始相对位置。 点击此处跳转题目。 示例 1&#…

【实操干货】如何开始用Qt Widgets编程?(四)

Qt 是目前最先进、最完整的跨平台C开发工具。它不仅完全实现了一次编写&#xff0c;所有平台无差别运行&#xff0c;更提供了几乎所有开发过程中需要用到的工具。如今&#xff0c;Qt已被运用于超过70个行业、数千家企业&#xff0c;支持数百万设备及应用。 在本文中&#xff0…

性能测试工具Jmeter你所不知道的东西····

谈到性能测试&#xff0c;大家一定会联想到Jmeter和LoadRunner,这两款工具目前在国内使用的相当广泛&#xff0c;主要原因是Jmeter是开源免费&#xff0c;LoadRunner 11在现网中存在破解版本。商用型性能测试工具对于中小型企业很难承担相关的费用。国内的性能测试工具有&#…

openGauss学习笔记-53 openGauss 高级特性-Ustore

文章目录 openGauss学习笔记-53 openGauss 高级特性-Ustore53.1 设计原理53.2 核心优势53.3 使用指导 openGauss学习笔记-53 openGauss 高级特性-Ustore Ustore 存储引擎&#xff0c;又名 In-place Update 存储引擎&#xff08;原地更新&#xff09;&#xff0c;是 openGauss …

JVM第二篇 类加载子系统

JVM主要包含两个模块&#xff0c;类加载子系统和执行引擎&#xff0c;本篇博客将类加载子系统做一下梳理总结。 目录 1. 类加载子系统功能 2. 类加载子系统执行过程 2.1 加载 2.2 链接 2.3 初始化 3. 类加载器分类 3.1 引导类加载器 3.2 自定义加载器 3.2.1 自定义加载器实…

关于两个不同数据库的两张表建立数据库链接,关联查询数据

一、数据库链接 数据库链接&#xff08;database link&#xff09;是用于跨不同数据库之间进行连接和数据传输的工具或方法。它允许在一个数据库中访问另一个数据库中的对象和数据。 二、具体操作 以Oracle数据库为例 --1.建立链接tjpt CREATE DATABASE LINK tjpt CONNECT…

python中super()用法

super关键字的用法 概述作用语法使用示例1.通过super() 来调用父类的__init__ 构造方法&#xff1a;2.通过supper() 来调用与子类同名的父类方法2.1 单继承2.2 多继承 概述 super() 是python 中调用父类&#xff08;超类&#xff09;的一种方法&#xff0c;在子类中可以通过su…

iOS开发Swift-3-UI与按钮Button-摇骰子App

1.创建新项目Dice 2.图标 删去AppIcon&#xff0c;将解压后的AppIcon.appiconset文件拖入Assets包。 3.将素材点数1-6通过网页制作成2x&#xff0c;3x版本并拖入Asset。 4.设置对应的UI。 5.拖入Button组件并设置style。 6.Ctrl加拖拽将Button拖拽到ViewController里&#xff0…

mysql 间隙锁原理深度详解

目录 一、前言 二、mysql之mvcc 2.1 什么是mvcc 2.2 mvcc组成 2.2.1 Undo log 多版本链 2.2.2 ReadView 2.2.3 快照读与当前读 三、RR级别下的事务问题 3.1 RR隔离级别解决的问题 3.1.1 幻读问题 3.2 幻读效果演示 3.2.1 准备测试表和数据 3.2.2 修改事务级别 3.…

机器学习实战之用 Scikit-Learn 正则化方法解决过拟合详解

你是不是在模型训练中遇到过这样的问题&#xff1a;在训练集上表现得极好&#xff0c;但在测试集上效果不佳&#xff1f;这就是过拟合的问题。 过拟合是模型在训练过程中学到了数据的“噪声”而非规律&#xff0c;导致在未知数据上表现不佳。那么怎么解决这个问题呢&#xff1…

java八股文面试[多线程]——阻塞队列

阻塞队列大纲&#xff1a; 什么是阻塞队列 阻塞队列&#xff1a;从名字可以看出&#xff0c;他也是队列的一种&#xff0c;那么他肯定是一个先进先出&#xff08;FIFO&#xff09;的数据结构。与普通队列不同的是&#xff0c;他支持两个附加操作&#xff0c;即阻塞添加和阻塞删…

excel 无法删除有合并单元格的列内容时的替代方法

背景&#xff1a; hp 笔记本电脑&#xff1b;win10 64位&#xff1b;excel 版本 16.0&#xff1b; office 2016自带excel 问题&#xff1a; 把pdf转excel后&#xff0c;由于原 pdf 图表本身的原因&#xff0c;转换后有不规则合并单元格的现象。 而在选择某列进行“删除” &a…