当前位置：首页 > news >正文

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

news 2025/8/1 6:12:06

在这里插入图片描述

需求描述

如上图所示，使用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			}}
});