安装Pinia 插件 pinia-plugin-persist 添加 persist 属性时报红线解决方法

文章讲述了在使用Pinia进行全局状态管理时遇到pinia-plugin-persist红线问题的解决过程,包括卸载旧插件、安装pinia-plugin-persistedstate,并给出了正确的Pinia配置示例,重点在于`enabled`和`strategies`属性的缺失和修正。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1,使用全局状态管理pinia 添加persist包红线,

网上很多都没有得到实际的解决方法。

2,接下来给大家梳理一下正确的解决方法; 首先卸载pinia-plugin-persist

pnpm uninstall pinia-plugin-persist

 安装pinia-plugin-persistedstate

pnpm install pinia-plugin-persistedstate

 3,在main.ts文件中配置如下

 查看 Pinia 配置项 以及 PersistedStateOptions 类型声明可知,不存在 enabled 以及 strateies 属性,正确写法如下:

export const useStore = defineStore("main", {
  state: () => ({
    someState: "你好 pinia"
  }),
  // 注意这里
  persist: {
    storage: localStorage,
    paths: []
  }
});

问题已解决! 

### Pinia 插件功能对比 #### 功能特性 pinia-plugin-persistedstate 和 pinia-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 属性会被持久化 }) ] }); ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值