(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进行状态管理并持久化存储
500 0
|
存储 JavaScript
vue项目中数据存储(pinia)
vue项目中数据存储(pinia)
172 0
|
3月前
|
存储 JavaScript API
Vuex 和 Pinia 的区别
【10月更文挑战第18天】Vuex 和 Pinia 都有各自的优势和适用场景。Vuex 适合较为大型和复杂的项目,强调严格的架构和流程;而 Pinia 则更适合中小型项目以及对灵活性和简洁性有更高要求的开发者。你可以根据项目的具体需求和个人喜好来选择使用哪一个状态管理库。
650 59
|
8月前
|
资源调度 JavaScript
Pinia的数据持久化
Pinia的数据持久化
|
5月前
|
存储 JavaScript API
从 Vuex 到 Pinia:解决 Pinia 缺失的三个基本功能
从 Vuex 到 Pinia:解决 Pinia 缺失的三个基本功能
|
6月前
|
存储 开发框架 JavaScript
在Vue3项目中使用pinia代替Vuex进行数据存储
在Vue3项目中使用pinia代替Vuex进行数据存储
|
5月前
|
Web App开发 JavaScript 安全
Vue状态管理库Pinia详解
Pinia 是一款专为 Vue 设计的状态管理库,它提供了一套简洁且直观的 API,旨在简化状态管理流程。Pinia 的设计理念强调简单性和易用性,相较于 Vuex,它摒弃了许多复杂的概念如 mutations 和模块的深层嵌套结构,转而提供一种更现代化且与 Vue 3 Composition API 高度兼容的状态管理模式。
|
5月前
|
存储 资源调度 JavaScript
Vue3如何使用Pinia详细介绍、pinia持久化存储(pinia-plugin-persistedstate详细配置)
Vue3如何使用Pinia详细介绍、pinia持久化存储(pinia-plugin-persistedstate详细配置)
|
7月前
|
JavaScript
Vue3 状态管理 - Pinia,超详细讲解!
Vue3 状态管理 - Pinia,超详细讲解!
|
8月前
|
JavaScript
vue中使用pinia及持久化
vue中使用pinia及持久化
71 0