关于在uniapp中使用pinia持久化插件报错
·
最近在做uniapp的项目,使用到了vue3+pinia,并使用插件pinia-plugin-persistedstate进行数据持久化存储,但是意外碰到了报错,特此记录一下
先把报错贴在这

操作步骤如下
1.使用pnpm安装pinia-plugin-persistedstate
pnpm i pinia-plugin-persistedstate
2.引入并配置插件
// stores/index.js
import { createPinia } from 'pinia';
// import { createPersistedState } from 'pinia-plugin-persistedstate' //引入持久化插件
import persist from 'pinia-plugin-persistedstate'
// 创建 pinia 实例
const pinia = createPinia()
// 使用数据持久化插件
// pinia.use(createPersistedState())
pinia.use(persist)
export default pinia
// stores/modules/user.js
import {
defineStore
} from 'pinia';
import {
ref
} from 'vue'
const persistKey = 'custom_store_uer'
export const useUserStore = defineStore('user',
() => {
const token = ref(null)
// 获取token
const getToken = () => token.value
// 保存token
const setToken = (val) => {
token.value = val
}
// 清空缓存数据
const clearCache = () => {
setToken(null)
}
// 退出登录
const logout = () => {
// 清空缓存数据
clearCache()
let timer = setTimeout(() => {
clearTimeout(timer)
uni.reLaunch({
url: '/pages/login/login',
})
}, 1000)
}
return {
token,
getToken,
setToken,
clearCache,
logout
}
},
// 重要:模块必须开启持久化,才会持久化!
// 注意:默认持久化,只在H5端有效,因为默认使用的是localStorage,小程序端不能使用这个API,所以需要重写存取方法,转调给UniApp的持久化方法
{
// 网页端配置
// #ifndef MP
persist: {
key: persistKey
},
// #endif
// 小程序端配置
// #ifdef MP
persist: {
key: persistKey,
storage: {
getItem(key) {
return uni.getStorageSync(key);
},
setItem(key, value) {
uni.setStorageSync(key, value);
},
},
},
// #endif
}
);
报错原因分析
怀疑是包没装好,可能没下载完整,就又删除重新安装了一遍,还是这样
然后又怀疑是插件本身的问题,于是换了另一个插件安装pinia-plugin-persist,貌似跟pinia-plugin-persistedstate差不多,只是名字不一样,配置什么的都一样
安装正常,运行正常,使用不正常。。。
配置完成后不生效,搜索了一下网上的教程没发现有什么问题
最后在persist那里加上了enable: true才生效,但是数据又默认存在了sessionstorage里面。。。
不知道什么毛病,于是又删掉这个,换回了pinia-plugin-persistedstate
最后怀疑到pnpm装包的问题,改用yarn安装,除了插件本身之外,还自动安装了好多其他的依赖包,应该都是在pinia-plugin-persistedstate中关联到的
再次启动运行,这会终于没有报错了,数据也顺利的保存在localstorage中
总结:在uniapp中使用pnpm安装pinia-plugin-persistedstate运行会报错,可能是没有关联到其他相关依赖导致的,改用yarn安装就正常了
更多推荐

所有评论(0)