最近在做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安装就正常了

更多推荐