vue3+vite+pinia+pinia-plugin-persistedstate持久化存储!!!pinia-plugin-persist 插件(持久化报错无效!!!感)

1 安装下面任意一个,可能和版本有关系,安装第一个一直报错 ;

export const useCounterStore = defineStore("counterStore", { 

上面这一句defineStore报错重载有问题;因此使用2 可能和vue版本用关系吧

Pinia 插件 pinia-plugin-persist 添加 persist 属性时报错:没有与此调用匹配的重载
1 pnpm uninstall pinia-plugin-persist

2 pnpm install pinia-plugin-persistedstate

2 main.ts配置 (persist一样)

import piniaPersistfrom 'pinia-plugin-persist'

import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const app = createApp(App)
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)
 

3 新建仓管 counterStore.ts


                
### Pinia 插件功能对比 #### 功能特性 pinia-plugin-persistedstatepinia-plugin-persist 都用于持久化存储 Pinia 状态,但在实现方式和具体功能上存在差异。 对于 `pinia-plugin-persistedstate` 而言,该插件提供了更简洁的 API 设计以及更好的性能优化。开发者可以通过简单的配置选项轻松启用状态持久化,并支持多种存储介质的选择,如 localStorage 或 sessionStorage[^1]。 而 `pinia-plugin-persist` 则提供了一种更为灵活的状态保存机制,允许用户自定义序列化逻辑、过滤要保存的状态字段等功能。这使得在复杂应用场景下具有更高的可定制性和适应性。 #### 使用方法 ##### 安装依赖 无论是哪个插件,在使用前都需要先安装对应的 npm 包: ```bash npm install pinia-plugin-persistedstate # or npm install pinia-plugin-persist ``` ##### 基本用法示例 ###### 使用 `pinia-plugin-persistedstate` 引入并注册插件后,只需指定 store 实例即可自动完成状态持久化操作: ```javascript import { createPinia } from 'pinia' import persistedState from 'pinia-plugin-persistedstate' const pinia = createPinia() pinia.use(persistedState) // 创建 Store 并开启持久化 export const useMainStore = defineStore('main', { state: () => ({ count: 0, }), persist: true, // 开启持久化 }) ``` ###### 使用 `pinia-plugin-persist` 相比之下,`pinia-plugin-persist` 提供了更多细粒度控制的能力,比如可以针对不同类型的属性设置不同的持久化策略: ```javascript import { createPinia } from 'pinia'; import piniaPersist from "pinia-plugin-persist"; const pinia = createPinia(); pinia.use(piniaPersist); // 创建 Store 可以为特定属性设定持久化规则 export const useUserStore = defineStore({ id: 'user', state: () => ({ name: '', age: null, }), plugins: [ piniaPersist.plugin({ key: 'user-store', paths: ['name'], // 只有 name 属性会被持久化 }) ] }); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端小云儿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值