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

刷新后，数据不见了。

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

uniapp中使用pinia插件

HBuilder X 已内置了 Pinia，无需手动安装。

在uniapp的main.js中导入pinia即可，代码如下：

js 复制代码

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 返回
	};
}

在项目根目录下使用命令行窗口安装插件:npm i pinia-plugin-persistedstate

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

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
  }
}

在defineStore函数内设置一个对象参数，persist:true便可开启持久化，然后代码这样写：

js 复制代码

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

h5，就是存localstorage的。

微信小程序没有localsotrage，所以对persist内的storage进行设置。

js 复制代码

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中便可找到要缓存的数据。

微信小程序可能会出现的问题在H5中实验正常的话，在微信小程序不起作用，并且控制台会报错 TypeError: Cannot read property 'localStorage' of undefind

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