(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,
  }
);
_揽
+关注
目录
打赏
0
0
1
0
572
分享
相关文章
Vue3如何使用Pinia详细介绍、pinia持久化存储(pinia-plugin-persistedstate详细配置)
Vue3如何使用Pinia详细介绍、pinia持久化存储(pinia-plugin-persistedstate详细配置)
除了 pinia-plugin-persistedstate,还有哪些 Pinia 插件可以使用?
除了 pinia-plugin-persistedstate,还有哪些 Pinia 插件可以使用?
vue2之vuex实现数据持久化(vuex-persistedstate)插件
vue2之vuex实现数据持久化(vuex-persistedstate)插件
695 0
|
10月前
|
vue中使用pinia及持久化
vue中使用pinia及持久化
85 0
Vue:vuex状态数据持久化插件vuex-persistedstate
Vue:vuex状态数据持久化插件vuex-persistedstate
193 0
vue项目中数据存储(pinia)
vue项目中数据存储(pinia)
180 0
vue使用pinia存储数据并保持数据持久化
vue使用pinia存储数据并保持数据持久化
405 0
|
10月前
pinia保持数据持久化
pinia保持数据持久化

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等