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

总结

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

相关文章

  • vue+ts实现元素鼠标拖动效果

    vue+ts实现元素鼠标拖动效果

    这篇文章主要为大家详细介绍了vue+ts实现元素鼠标拖动效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11
  • Vue DPlayer详细使用教程含遇到坑

    Vue DPlayer详细使用教程含遇到坑

    Vue-DPlayer是一个易于使用、高性能的基于Vue.js的视频播放器组件,本文给大家介绍Vue DPlayer详细使用,本文将从四个方面对Vue-DPlayer进行详细的阐述,感兴趣的朋友一起看看吧
    2023-10-10
  • Vue Element前端应用开发之功能点管理及权限控制

    Vue Element前端应用开发之功能点管理及权限控制

    在一个业务管理系统中,如果我们需要实现权限控制功能,我们需要定义好对应的权限功能点,然后在界面中对界面元素的功能点进行绑定,这样就可以在后台动态分配权限进行动态控制了,权限功能点是针对角色进行控制的,也就是简称RBAC(Role Based Access Control)。
    2021-05-05
  • 在Vue中定义和调用过滤器的方法

    在Vue中定义和调用过滤器的方法

    过滤器(Filters)是 vue 为开发者提供的功能,常用于文本的格式化,这篇文章主要介绍了如何在Vue中定义和调用过滤器,需要的朋友可以参考下
    2023-09-09
  • Vue如何根据角色获取菜单动态添加路由

    Vue如何根据角色获取菜单动态添加路由

    这篇文章主要介绍了Vue如何根据角色获取菜单动态添加路由,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-01-01
  • Vue项目创建首页发送axios请求的方法实例

    Vue项目创建首页发送axios请求的方法实例

    这篇文章主要给大家介绍了关于Vue项目创建首页发送axios请求的相关资料,文中通过图文以及实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2023-02-02
  • 解决echarts echarts数据动态更新和dataZoom被重置问题

    解决echarts echarts数据动态更新和dataZoom被重置问题

    这篇文章主要介绍了解决echarts echarts数据动态更新和dataZoom被重置问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vue.js动态数据绑定学习笔记

    vue.js动态数据绑定学习笔记

    这篇文章主要为大家详细介绍了vue.js动态数据绑定学习笔记,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • Vue3如何根据搜索框内容跳转至本页面指定位置

    Vue3如何根据搜索框内容跳转至本页面指定位置

    在开发中我们经常遇到这样的需求,根据要求跳转至本页面指定位置,这篇文章主要给大家介绍了关于Vue3如何根据搜索框内容跳转至本页面指定位置的相关资料,需要的朋友可以参考下
    2022-11-11
  • 一文带你详细了解Vue中的v-for

    一文带你详细了解Vue中的v-for

    v-for循环遍历数据,永远不要把v-if和v-for同时用在同一个元素上,下面这篇文章主要给大家介绍了关于如何通过一文带你详细了解Vue中v-for的相关资料,需要的朋友可以参考下
    2022-10-10

最新评论