uniapp Vue3版本使用pinia存储持久化插件pinia-plugin-persistedstate对微信小程序的配置

需求描述

如上图所示，使用uniapp开发微信小程序商城时候，会涉及到加入到购物车模块，一般用户选择的商品加入购物车，在开发的时候可以使用pinia，将用户选择加入购物车的商品进行全局状态管理，问题在于强制刷新页面的时候，刚刚选择加入购物车的商品列表就清空了。

那么怎么解决这个问题那？

可以使用Pinia插件pinia-plugin-persistedstate可配置的 Pinia 存储持久化。

uniapp中使用pinia插件

1.在uniapp项目中使用pinia

要想使用插件的话，首先要在uniapp的main.js中导入pinia，HBuilder X 已内置了 Pinia，无需手动安装，下方是官方的示例代码：

import App from './App'
import { createSSRApp } from 'vue';
import * as Pinia from 'pinia';

export function createApp() {
	const app = createSSRApp(App);
	app.use(Pinia.createPinia());
	return {
		app,
		Pinia, // 此处必须将 Pinia 返回
	};
}

2.安装pinia-plugin-persistedstate插件

pinia-plugin-persistedstate插件地址：https://prazdevs.github.io/pinia-plugin-persistedstate/zh/

在项目根目录下使用命令行窗口安装插件

npm i pinia-plugin-persistedstate

安装完成，在main.js中导入插件，修改官方示例代码，如下所示：

import { createSSRApp } from 'vue'
import * as Pinia from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
export function createApp() {
  const app = createSSRApp(App)
  const pinia = Pinia.createPinia()
  pinia.use(piniaPluginPersistedstate)
  app.use(pinia);
  return {
    app,
	Pinia
  }
}

3.defineStore中做持久化配置

export const useCartStore = defineStore('cart', () => {	
	const goodsTotal = computed(()=>{
		...实现代码
	})	
	const priceTotal = computed(()=>{
		...实现代码
	})	
	const pushGoods = (data)=>{
		...实现代码
	}
	return {
		cartList,
		pushGoods,
		goodsTotal,
		priceTotal
	}
},{
	persist:true
});

在defineStore函数内设置一个对象参数，persist:true便可开启持久化，当cartList数据发生改变时，在浏览器控制台的Application下Local storage中，可以找到key为“cart”的数据，如下所示：

如上所示，在H5开发中，使用pinia的插件再刷新的时候，购物车列表中的数据将不会消失，说明已经做了持久化的存储，但是微信小程序中是没有localstorage的，仍然不能进行持久化，下面就对persist内的storage进行设置，可以修改缓存的方式。

4.在微信小程序中做持久化存储

export const useCartStore = defineStore('cart', () => {	
	const goodsTotal = computed(()=>{
		...实现代码
	})	
	const priceTotal = computed(()=>{
		...实现代码
	})	
	const pushGoods = (data)=>{
		...实现代码
	}
	return {
		cartList,
		pushGoods,
		goodsTotal,
		priceTotal
	}
},{
	persist:{
		storage:{
			getItem:uni.getStorageSync,
			setItem:uni.setStorageSync			
		}
	}
});

如上所示，修改storage的获取缓存和设置缓存的方式，在uniapp开发微信小程序中，提供了同步获取/修改缓存的API，按照如上方式的设置，在微信小程序控制台的storage中便可找到要缓存的购物车列表数据，如下图所示：

微信小程序可以会出现的问题

再H5中实验正常的话，在微信小程序不起作用，并且控制台会报错 TypeError: Cannot read property ‘localStorage’ of undefind

解决方法：

在uniapp项目中unpackage打包目录中，删除掉之前打包的mp-weixin文件，重启微信小程序项目，这样应该问题就能解决了，如果还存在问题，请在评论区留言。