关于Pinia状态持久化问题

 更新时间:2023年03月24日 10:42:51   作者:Ocean!!  
这篇文章主要介绍了关于Pinia状态持久化问题,具有很好的参考价值,希望对大家有所帮助。

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:[] //可以选择保存的字段  其余的不保存
            }
        ]
    }

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • ant desing vue table 实现可伸缩列的完整例子

    ant desing vue table 实现可伸缩列的完整例子

    最近在使用ant-design-vue做表格时,遇到要做一个可伸缩列表格的需求,在网上一直没有找到好的方法,于是小编动手自己写个可以此功能,下面小编把ant desing vue table 可伸缩列的实现代码分享到脚本之家平台供大家参考
    2021-05-05
  • 基于 Vue 的 Electron 项目搭建过程图文详解

    基于 Vue 的 Electron 项目搭建过程图文详解

    这篇文章主要介绍了基于 Vue 的 Electron 项目搭建过程,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-07-07
  • VUE项目去除input 框值所有空格的操作方法

    VUE项目去除input 框值所有空格的操作方法

    这篇文章主要介绍了VUE项目去除input 框值所有空格的操作方法,主要包括去除空格的方法、正则和element ui写法,本文给大家讲解的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-10-10
  • vuejs如何解决浏览器切换页面后setInterval计时器停止执行的问题

    vuejs如何解决浏览器切换页面后setInterval计时器停止执行的问题

    setinterval()是定时调用的函数,可按照指定的周期(以毫秒计)来调用函数或计算表达式,这篇文章主要给大家介绍了关于vuejs如何解决浏览器切换页面后setInterval计时器停止执行的问题,需要的朋友可以参考下
    2024-01-01
  • vue中的过滤器实例代码详解

    vue中的过滤器实例代码详解

    这篇文章主要介绍了vue中的过滤器,本文通过文字实例代码相结合的形式给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-06-06
  • vuex新手进阶篇之actions的使用方法

    vuex新手进阶篇之actions的使用方法

    actions用来处理mutations中的异步操作,触发mutations中的函数,下面这篇文章主要给大家介绍了关于vuex新手进阶篇之actions的使用方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-10-10
  • Vue移动端下拉刷新组件的使用教程

    Vue移动端下拉刷新组件的使用教程

    这篇文章主要介绍了Vue移动端下拉刷新组件的使用教程,每一次我在使用vant组件库里面list组件和下拉刷新连在一起用的时候都会出现下拉刷新和列表下滑局部滚动的冲突,这就很难受,这篇文章将解决它
    2023-04-04
  • vue3+vue-cli4中使用svg的方式详解(亲测可用)

    vue3+vue-cli4中使用svg的方式详解(亲测可用)

    最近在做个vue的项目,从各种github上的开源库上借鉴开发方法,给大家分享下,这篇文章主要给大家介绍了关于vue3+vue-cli4中使用svg的相关资料,需要的朋友可以参考下
    2022-08-08
  • Vue过滤器filters如何使用

    Vue过滤器filters如何使用

    Vue过滤器filters用于一些常见的文本格式化,通过过滤器可以进行处理成自己想要展示出来的格式,由“管道”符号指示,本文给大家介绍Vue过滤器filters使用方式,感兴趣的朋友一起看看吧
    2023-10-10
  • Vue中强制组件重新渲染的正确方法

    Vue中强制组件重新渲染的正确方法

    这篇文章主要介绍了Vue中强制组件重新渲染的正确方法,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
    2021-01-01

最新评论