Pinia 数据持久化储存(pinia-plugin-persistedstate)

pinia需要使用pinia-plugin-persistedstate插件来进行数据的存储

插件官网地址:
https://prazdevs.github.io/pinia-plugin-persistedstate/guide/config.html

1、安装

这里对插件的安装就不多赘述了,放两张官网的截图

使用命令:npm i pinia-plugin-persistedstate

在这里插入图片描述

2、使用

在这里插入图片描述

3、关于全部缓存及部分缓存的说明

(1)将store的state中的全部数据进行缓存,直接在state同级下面添加persist对象
在这里插入图片描述

此时,默认将数据存放在浏览器的SessionStorage中,key为store的名称,value为该store中所有的数据。
在这里插入图片描述
(2)将store的state中的数据进行部分缓存
此时需要在persist中添加strategies数组,
在这里插入图片描述

每个元素的key是想要储存的数据变量名(在state中定义的),storage可以写sessionStorage或者localStorage,此时,sessionStorage中的key就是变量名,value就是该变量的值

在这里插入图片描述

文章到这里就结束啦,希望能够帮助到大家!

  • 12
    点赞
  • 60
    收藏
    觉得还不错? 一键收藏
  • 13
    评论
好的,我会为您提供 Pinia 数据持久化储存插件(pinia-plugin-persistedstate)的详细代码配置。 首先,您需要安装 `pinia-plugin-persistedstate` 插件: ``` npm install pinia-plugin-persistedstate ``` 然后,在您的 Vue.js 项目中,您需要创建一个 Pinia 实例,并使用 `use` 方法加载 `pinia-plugin-persistedstate` 插件: ```javascript import { createPinia } from 'pinia' import { createPersistedState } from 'pinia-plugin-persistedstate' const pinia = createPinia() pinia.use(createPersistedState({ key: 'my-app-state', // 存储在本地存储中的键名 initialState: () => ({ // 初始状态 count: 0, todos: [] }), storage: window.localStorage // 存储在哪个存储中(可选) })) ``` 以上代码中,我们使用了 `createPersistedState` 方法创建一个持久化状态插件实例,并将其传递给 `pinia.use()` 方法以加载插件。 在 `createPersistedState` 方法中,您需要传递一个对象参数,包含以下选项: - `key`:在本地存储中存储状态的键名。 - `initialState`:状态的初始值。这可以是一个对象或一个函数,该函数返回一个对象。 - `storage`:指定存储状态的存储对象。默认是 `window.localStorage`。 现在,您可以在 Pinia store 中使用持久状态了。例如: ```javascript import { defineStore } from 'pinia' export const useCounterStore = defineStore('counter', { state: () => ({ count: 0 }), actions: { increment() { this.count++ }, decrement() { this.count-- } } }) ``` 以上代码中,我们定义了一个简单的计数器存储。现在,我们可以在组件中使用 `useCounterStore`: ```html <template> <div> <p>Count: {{ count }}</p> <button @click="increment">+</button> <button @click="decrement">-</button> </div> </template> <script> import { useCounterStore } from './store' export default { setup() { const counterStore = useCounterStore() return { count: counterStore.count, increment: counterStore.increment, decrement: counterStore.decrement } } } </script> ``` 现在,每当用户增加或减少计数器时,状态都会自动持久化到本地存储中。当用户刷新页面或重新打开应用程序时,状态将从本地存储中自动加载。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 13
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值