技术栈:vue3 + vue-Router ^4.0 + pinia 3.0 + pinia-plugin-persist 持久化存储 场景: vue-router 路由守卫 跳转前判断 pinia 状态 state的token是否存在 ,存在就跳转,不存在跳转到 登录页面。 科普一:pinia-plugin-persist 的使用 import { createPinia } from "pinia"import piniaPluginPersist from'pinia-...
constappStore=useAppStore(pinia); 虽然上面写法,不会在浏览器中报错,不过会导致pinia的一些功能错乱(因为整个应用中初始化了多个pinia) 特别是pinia-plugin-persist的持久化会失效.. 三、正确的使用方法 正如官网所描述:
pinia-plugin-persist失效了 只有真正的改变了store的值,才能触发持久化的存储,博主学习的时候在这里踩了很久的坑,当时只是改变了数据的引用,并没有真正改变pipia里面的值,以为pinia-plugin-persist失效了,看了源码才知道原理是通过$subscribe监听,断点调试发现没有触发才恍然大悟。
使用npm 或 yarn 安装pinia-plugin-persist: npminstallpinia-plugin-persist# 或者yarnaddpinia-plugin-persist 配置Pinia 并使用插件: 在创建 Pinia 实例时,使用pinia-plugin-persist插件: // main.jsimport{createApp}from'vue';import{createPinia}from'pinia';import{persist}from'pinia-plugin-persist';importApp...
将pinia-plugin-persist类型定义文件添加到您的 tsconfig 文件中。 {"compilerOptions":{"types":["pinia-plugin-persist"]},} 高级用法 基本用法忽略 在store文件夹中创建index.ts paths默认情况下,整个状态都会被持久化,但是您可以通过在每个策略中设置键来指定想要持久化的状态键。
$state 存储storage.setItem(storeKey,JSON.stringify(store.$state))}}exportdefault({options,store}:PiniaPluginContext):void=>{// 判断插件功能是否开启if(options.persist?.enabled){// 默认策略实例constdefaultStrat:PersistStrategy[]=[{key:store.$id,storage:sessionStorage,}]conststrategies=options.persist...
persist: true表示启用持久化。 可以看到我的代码中没有显式书写import defineStore这个方法,原因是因为模块@pinia/nuxt自己实现了自动引入该方法,所以我们可以省略不写,如果defineStore方法名冲突了,还可以在配置中重命名,具体自己去看该模块的文档。 自动引入仓库模块 ...
Pinia-plugin-persist极大地简化了Pinia状态的持久化过程,使得开发者可以更加专注于业务逻辑的实现,而不必担心状态在用户交互过程中的临时丢失问题。通过合理配置和使用这个插件,Vue3应用能够在用户体验上达到新的高度。 引言 随着Vue3和Pinia的普及,状态管理在Vue应用中变得更为便捷。然而,在实际项目开发过程中,我们往往...
时隔多日,突然又看到了有人回复我这个问题,然后把持久化插件(pinia-plugin-persist)卸载了,配置也删了,安装了pinia-plugin-persistedstate,这个插件配置好,就可以了。下面是没有报错,并且打包成功的截图!!!非常感谢各位的帮助!!! typescript前端 有用关注4收藏 回复 阅读9.2k ...
// tsconfig.json{"compilerOptions": {"types": ["pinia-plugin-persist-uni"] } } 基本用法 通过在你的 stroe 中配置 persist, 将会通过 uniAppStorage 来持久化存储你的数据. 请配置 id,用于持久化存储时的 key。 // store/user.tsimport{defineStore}from'pinia'exportconstuseUserStore=defineStore('...