iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >关于Pinia状态持久化问题
  • 954
分享到

关于Pinia状态持久化问题

Pinia状态持久化持久化Pinia状态状态持久化 2023-03-24 11:03:23 954人浏览 安东尼
摘要

目录Pinia状态持久化Pinia数据持久化处理总结Pinia状态持久化 在vue3中,常用Pinia代替Vuex来进行状态管理。这里贴上Pinia的官网,有兴趣的可以去了解一下。P

Pinia状态持久化

vue3中,常用Pinia代替Vuex来进行状态管理。这里贴上Pinia的官网,有兴趣的可以去了解一下。Pinia?

其他过程就省略了,今天在vue3中实现一个最简单的Pinia持久化插件,后续可能会进一步封装

//   FilePath <  @/main.ts >

import { createApp, toRaw } from 'vue'
import App from './App.vue'
//	引入pinia
import { createPinia, PiniaPluginContext } from "pinia";

const app = createApp(App)

type Options = {
    key?: string
}
//	默认的key
const __piniaKey__: string = 'Ocean'
//	负责存储的函数
const setStorage = (key: string, value: any) => {
    //	将对象转字符串后存入 localStorage
    localStorage.setItem(key, JSON.stringify(value))
}
//	负责取值的函数
const getStorage = (key: string) => {
    //	根据key拿到localStorage中对应的值
    return localStorage.getItem(key) ? jsON.parse(localStorage.getItem(key) as string) : {}
}
//	Pinia持久化插件
const piniaPlugin = (options: Options) => {
    return (context: PiniaPluginContext) => {
        const { store } = context
        const data = getStorage(`${options?.key ?? __piniaKey__}-${store.$id}`)
        console.log(data);
        
        store.$subscribe(() => {
            // store.$state是一个 proxy 对象 要通过 toRaw() 转换成 原始对象
            setStorage(`${options?.key ?? __piniaKey__}-${store.$id}`,toRaw(store.$state))
        })
        return {
            ...data
        }
    }
}
//	创建一个Pinia实例
const store = createPinia()
//	注册插件
store.use(piniaPlugin({
    key: 'pinia'
}))

app.use(store)
app.mount('#app')

Pinia数据持久化处理

1.下载插件pinia-plugin-persist

2.store下的index.js

import { createPinia } from 'pinia'
//pinia 持久化插件
import piniaPluginPersist from 'pinia-plugin-persist'
const store = createPinia()
store.use(piniaPluginPersist)
export default store

在写的store.js文件下增加配置项 默认为sessionStorage

  persist: {
        enabled: true,
        strategies: [
            {
                key: 'user',
                storage: localStorage,
                path:[] //可以选择保存的字段  其余的不保存
            }
        ]
    }

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: 关于Pinia状态持久化问题

本文链接: https://www.lsjlt.com/news/201154.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 关于Pinia状态持久化问题
    目录Pinia状态持久化Pinia数据持久化处理总结Pinia状态持久化 在vue3中,常用Pinia代替Vuex来进行状态管理。这里贴上Pinia的官网,有兴趣的可以去了解一下。P...
    99+
    2023-03-24
    Pinia状态持久化 持久化Pinia状态 状态持久化
  • Pinia状态持久化问题怎么解决
    本篇内容介绍了“Pinia状态持久化问题怎么解决”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!Pinia状态持久化在vue3中,常用Pini...
    99+
    2023-07-05
  • Vue使用pinia管理数据pinia持久化存储问题
    目录Vue使用pinia管理数据Vue3 + TSTS 类型声明文件Axios 二次封装pinia 持久化存储用法常见疑问进阶用法(按需持久化所需数据)总结Vue使用pinia管理数...
    99+
    2023-03-24
    Vue pinia管理数据 pinia持久化存储 pinia管理数据
  • vue页面状态持久化怎么实现
    本篇内容介绍了“vue页面状态持久化怎么实现”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!需求:左树右表。组织树选中某一节点后,进入详情页面...
    99+
    2023-06-21
  • 详解vue页面状态持久化详解
    目录代码:补充:总结需求:左树右表。组织树选中某一节点后,进入详情页面,再返回时需要保持选中。其他查询条件也需要保持状态。 思路:用vuex结合localStorage缓存数据。点击...
    99+
    2024-04-02
  • Hibernate持久化对象的状态有哪些
    本篇文章给大家分享的是有关Hibernate持久化对象的状态有哪些,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。Hibernate中的对象有3中状态,瞬时对象(Transien...
    99+
    2023-05-31
    hibernate 持久化classloader 对象
  • 关于Redis持久化的深入探究
    目录Redis持久化1、为什么需要持久化2、RDB(Redis Database)2.1 官网介绍2.2 什么是RDB2.3 操作步骤3、AOF(Append Only File)3.1 什么是AOF?3.2 AOF持久...
    99+
    2023-05-22
    Redis持久化详解 Redis 持久化
  • SpringBoot如何实现持久化登录状态获取
    目录SpringBoot 持久化登录状态获取1.编写登录的controller文件2.编写首页Controller逻辑3.运行测试,成功SpringBoot 实现登录登出,登录态管理...
    99+
    2024-04-02
  • SpringBoot怎么实现持久化登录状态获取
    本篇内容主要讲解“SpringBoot怎么实现持久化登录状态获取”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“SpringBoot怎么实现持久化登录状态获取”吧!SpringBoot 持久化登录...
    99+
    2023-06-25
  • 持久化对象在Hibernate三种状态是什么
    这篇文章主要介绍“持久化对象在Hibernate三种状态是什么”,在日常操作中,相信很多人在持久化对象在Hibernate三种状态是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”持久化对象在Hiberna...
    99+
    2023-06-17
  • 关于Redis数据持久化的概念介绍
    目录一、数据持久化的概述1、RDB持久化2、开启AOF二 .RDB 和 AOF 的优缺点 1、 RDB 持久化优缺点2、 AOF 持久化优缺点一、数据持久化的概述 Redi...
    99+
    2024-04-02
  • vuex状态持久化在vue和nuxt.js中的区别说明
    目录vuex状态持久化在vue和nuxt.js的区别Vue使用Nuxtvue的vuex的数据持久化使用插件vuex-persistedstate对数据进行数据的持久化处理plugin...
    99+
    2024-04-02
  • 如何解决Flex对象持久化问题
    这篇文章主要为大家展示了“如何解决Flex对象持久化问题”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何解决Flex对象持久化问题”这篇文章吧。关于Flex对象持久化关于Flex对象序列化和持...
    99+
    2023-06-17
  • Mybatis关于动态排序#{}${}问题
    目录Mybatis动态排序 #{} ${}问题通过动态排序理解#{}和${}的区别例如注意事项Mybatis动态排序 #{} ${}问题 在写Mybatis动态排序是遇到一个问题,开...
    99+
    2022-11-13
    Mybatis动态排序 Mybatis #{} Mybatis ${}
  • 关于bat脚本中的命令状态码相关的%errorlevel%变量问题
    bat脚本中常用%errorlevel%表达上一条命令的返回值,即命令执行状态码、也称命令退出码 一般上一条命令的执行结果返回的值只有两种,0和非0 (如常见的1,2,4,5,900...
    99+
    2024-04-02
  • 关于Spring Boot对jdbc的支持问题
    项目结构 pom.xml pom.xml: <?xml version="1.0" encoding="UTF-8"?> <project x...
    99+
    2024-04-02
  • 关于Redis数据库三种持久化方案介绍
    目录一、回顾Redis二、方案一:bgsave三、方案二:配置文件rdb四、方案三:aof总结一、回顾Redis 1、redis的特点 redis是一个内存中的数据结构存储系统。优点...
    99+
    2024-04-02
  • 浅谈Docker run 容器处于created状态问题
    在最近遇到的一次问题中,有这样一种现象: 系统有一个测试脚本会不断的执行docker run命令来运行容器,在测试过程中发现有一个情况是,有时候容器没有完全被运行到"Up"状态,而是...
    99+
    2024-04-02
  • 解决k8snamespace一直处于Terminating状态的问题
    目录json 格式导出 namespace 信息修改 json 文件开启 proxy 服务调用接口删除 namespace以下的 tool 为 Terminating 状态的 nam...
    99+
    2022-11-13
    k8s 命名空间处于 Terminating 状态 k8s namespace Terminating 状态
  • 关于ffmpeg的动态链接库问题
    FFmpeg是一个开源的跨平台音视频处理工具,可以用于录制、转码、编辑等各种音视频处理操作。它提供了一组动态链接库,可以用于在自己的...
    99+
    2023-09-08
    ffmpeg
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作