网站搜索下拉是怎么做的,知乎类 wordpress,合肥建设云平台,专注移动网站建设不同版本的pinia支持的存储插件不同#xff0c;高/低版本的持久化存储插件整合如下#xff0c;都是我实践过的#xff0c;请放心使用。#x1f60a; 一、Vue3.2#xff0c;pinia 2.0.5#xff0c;用pinia-plugin-persist
提示#xff1a;不要去下最新的pinia-plug… 不同版本的pinia支持的存储插件不同高/低版本的持久化存储插件整合如下都是我实践过的请放心使用。 一、Vue3.2pinia 2.0.5用pinia-plugin-persist
提示不要去下最新的pinia-plugin-persistedstate那是给vue3.3和pinia2.1以上版本使用的。
1、安装
npm i pinia-plugin-persist
或 yarn add pinia-plugin-persist2.引入
// store/index.tsimport piniaPluginPersist from pinia-plugin-persist; // 引入pinia.use(piniaPluginPersist); // 使用持久化存储插件3.需要存储的子store
在与actions同层级添加persist对象 storage: 有sessionStorage和localStorage临时和长缓存根据自身需求选择 paths:要存储当前store哪些数据例如我要存储用户登录信息loginForm填入即可。
import { defineStore } from pinia;
export const useUserStore defineStore(User, {state: () ({loginForm: {},}),getters: {},actions: {},persist: {// 开启持久化enabled: true,// 选择存储方式和内容strategies: [{ storage: localStorage, paths: [loginForm] }],},
});
插一句由于我的项目是老的vue3.2和pinia2.0.5如果项目全面升级为3.3那需要改动的东西太多了到时各种依赖的版本冲突就出来了不好整所以就保留当前版本但我要用插件存储找了很多方案都是vue3.3的找了很久才找到匹配vue3.2的文章。因此做个笔记方便以后查阅。其实用H5的localStorage.getItem/setItem也可以实现只是那个设置和取值没这个方便所以选了这个。 参考文章https://www.cnblogs.com/yuwenjing0727/p/17163069.html
二、vue3.2/3.3pinia 2.1.7 pinia-plugin-persistedstate
1、安装
pnpm add pinia-plugin-persistedstate2.3.0 -S2、pinia引入使用 store/index.ts
import piniaPluginPersistedstate from pinia-plugin-persistedstate// 使用持久化存储插件
pinia.use(piniaPluginPersistedstate)3、需要长缓存的store这样配置
store/modules/user.tsexport const useStore defineStore({id: user,state: () ({name: 很老很老的值,}),actions: {changeName(name: string) {this.name name},},// 核心代码在这里 ↓//persist:true //存储整个对象// 选择性的长缓存persist: {storage: localStorage, //default localStorage//设置[name] --只会将name 这个key进行缓存paths: [name],},
})参考文章 https://download.csdn.net/blog/column/12471199/133916576
