(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进行状态管理并持久化存储
711 0
解决使用-webkit-app-region后鼠标点击失败的问题
在开发中,如果我们想要实现窗口拖动的功能,可以通过给相应的元素设置 -webkit-app-region: drag 属性来实现。然而,这样做会引发一些问题,包括当前元素权级高于其他元素、无法触发鼠标相关事件以及双击全屏和还原窗口大小功能失效等。本文将介绍如何解决这些问题,实现既能拖动窗口又不影响窗口内部元素的需求。
2098 0
|
前端开发 JavaScript 安全
|
API
Pinia 实用教程【Vue3 状态管理】状态持久化 pinia-plugin-persistedstate,异步Action,storeToRefs(),修改State的 $patch,$reset
Pinia 实用教程【Vue3 状态管理】状态持久化 pinia-plugin-persistedstate,异步Action,storeToRefs(),修改State的 $patch,$reset
3528 1
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 来检查代码规范并自动格式化 Vue.js 代码。
【10月更文挑战第7天】随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 来检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这两个工具,可以确保代码风格一致,提升团队协作效率和代码质量。
782 2
|
存储 SQL 关系型数据库
使用MySQL Workbench进行数据库备份
【9月更文挑战第13天】以下是使用MySQL Workbench进行数据库备份的步骤:启动软件后,通过“Database”菜单中的“管理连接”选项配置并选择要备份的数据库。随后,选择“数据导出”,确认导出的数据库及格式(推荐SQL格式),设置存储路径,点击“开始导出”。完成后,可在指定路径找到备份文件,建议定期备份并存储于安全位置。
1522 11
|
资源调度 JavaScript
Pinia的数据持久化
Pinia的数据持久化
|
JavaScript 前端开发 API
vue3中常用插件的使用方法:按需引入自定义组件,自动导入依赖包,自动生成路由,自动生成模拟数据
vue3中常用插件的使用方法:按需引入自定义组件,自动导入依赖包,自动生成路由,自动生成模拟数据
2012 0
|
人工智能 IDE Java
MarsCode AI 一款免费的代码辅助工具,值得一试
MarsCode是由字节跳动旗下公司推出的AI编程工具,旨在提升编码效率和质量。它既是一个云端集成开发环境(IDE),也支持作为VS Code和JetBrains等IDE的智能扩展,提供代码补全、生成、优化等功能,并支持多种编程语言。通过AI助手,MarsCode帮助开发者减少重复劳动,提高代码质量和可维护性,同时支持跨平台使用,为开发者带来便捷高效的编程体验。
1914 1