做网站做好用的软件,太原建站培训,竞价排名广告,织梦小说网站源码小程序端 Pinia 持久化
说明#xff1a;Pinia 用法与 Vue3 项目完全一致#xff0c;uni-app 项目仅需解决持久化插件兼容性问题。
持久化存储插件
安装持久化存储插件#xff1a; pinia-plugin-persistedstate pnpm i pinia-plugin-persistedstate插件默认使用 localStor…小程序端 Pinia 持久化
说明Pinia 用法与 Vue3 项目完全一致uni-app 项目仅需解决持久化插件兼容性问题。
持久化存储插件
安装持久化存储插件 pinia-plugin-persistedstate pnpm i pinia-plugin-persistedstate插件默认使用 localStorage 实现持久化小程序端不兼容需要替换持久化 API。
基本用法
import { defineStore } from pinia
import { ref } from vue
// 定义 Store
export const useMemberStore defineStore(member,() {// 会员信息const profile refany()
// 保存会员信息登录时使用const setProfile (val: any) {profile.value val}
// 清理会员信息退出时使用const clearProfile () {profile.value undefined}
// 记得 returnreturn {profile,setProfile,clearProfile,}},// TODO: 持久化{// 网页端的配置// persist: true,// 小程序端的配置persist: {storage: {getItem: (key: string) uni.getStorageSync(key),setItem: (key: string, value: string) uni.setStorageSync(key, value)},},},
)// src/stores/index.ts
import { createPinia } from pinia
import persist from pinia-plugin-persistedstate
// 创建 pinia 实例
const pinia createPinia()
// 使用持久化存储插件
pinia.use(persist)
// 默认导出给 main.ts 使用
export default pinia
// 模块统一导出
export * from ./modules/member// main.ts
import { createSSRApp } from vue
import pinia from ./stores
import App from ./App.vue
export function createApp() {const app createSSRApp(App)
app.use(pinia)return {app,}
}多端兼容
网页端持久化 API // 网页端API
localStorage.setItem()
localStorage.getItem()多端持久化 API // 兼容多端API
uni.setStorageSync()
uni.getStorageSync()原理 可以看到 persist 默认接收一个 boolean。表示是否开启持久化而且默认持久化网页端。 此时我们是小程序端就需要在 storage 中进行配置持久化的地方。 这里接收两个配置项 getItem 和 setItem代表持久化的 setter 和 getter。 Configuration | pinia-plugin-persistedstate (prazdevs.github.io)
