(pinia-plugin-persistedstate)pinia 持久化存储

简介: (pinia-plugin-persistedstate)pinia 持久化存储

背景

我们使用pinia的时候,会遇到页面刷新的时候数据丢失,我们自己解决的话,就是在页面刷新之前将数据存储到本地,然后在页面打开的时候将数据从本地读出来,实现数据持久化。

所以我们可以通过插件来直接帮我们完成这个操作来实现自动化存储


一、安装插件

yarn add pinia-plugin-persistedstate
# 或
npm i pinia-plugin-persistedstate

二、使用插件(main.js)

import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);
app.use(pinia);

三、模块开启持久化

const useHomeStore = defineStore("home",()=>{
...
},
// defineStore 第三个参数
  {
    // 添加配置开启 state/ref 持久化存储
    // 插件默认存储全部 state/ref
    persist: true,
  }
);
目录
相关文章
|
存储 资源调度 JavaScript
在Vue 3项目中引入Pinia进行状态管理并持久化存储
在Vue 3项目中引入Pinia进行状态管理并持久化存储
911 0
websocket封装带心跳和重连机制(vue3+ts+vite)
websocket封装带心跳和重连机制(vue3+ts+vite)
2278 0
|
存储 资源调度
在 Pinia 中如何实现状态持久化?
在 Pinia 中如何实现状态持久化?
3397 57
|
5月前
|
SQL XML JavaScript
【RuoYi-Eggjs】:将若依带入 Node.js 世界的企业级后台管理系统
RuoYi-Eggjs 是基于 Egg.js 的企业级后台系统,100% 复刻若依功能,支持 MyBatis XML 风格 SQL、多数据库、JWT 认证、权限控制与代码自动生成,完美对接 RuoYi-Vue3 前端,助力 Node.js 开发者高效构建管理系统。
488 5
|
资源调度 JavaScript 前端开发
Pinia 如何在 Vue 3 项目中进行安装和配置?
Pinia 如何在 Vue 3 项目中进行安装和配置?
1367 4
ts中interface和type的区别
ts中interface和type的区别
1477 61
|
JavaScript 前端开发 开发工具
web项目规范配置(husky、eslint、lint-staged、commit)
通过上述配置,可以确保在Web项目开发过程中自动进行代码质量检查和规范化提交。Husky、ESLint、lint-staged和Commitlint共同作用,使得每次提交代码之前都会自动检查代码风格和语法问题,防止不符合规范的代码进入代码库。这不仅提高了代码质量,还保证了团队协作中的一致性。希望这些配置指南能帮助你建立高效的开发流程。
896 5
|
资源调度 JavaScript
vue3:vue3+vite+ts+pinia(上)
vue3:vue3+vite+ts+pinia(上)
405 0
|
存储 开发框架 JavaScript
在Vue3项目中使用pinia代替Vuex进行数据存储
在Vue3项目中使用pinia代替Vuex进行数据存储
|
前端开发 开发者 容器
Vue3中Sass的安装与使用指南:轻松上手CSS预处理器
Vue3中Sass的安装与使用指南:轻松上手CSS预处理器
1507 0

热门文章

最新文章