微信小程序使用pinia-plugin-persistedstate报错找不到localstorage

因为微信小程序种是没有localstorage.setItem的方法的。所以要再使用持久化之后改成一下存储方式

persist.ts

复制代码
import {PersistedStateOptions} from "pinia-plugin-persistedstate";

/**
 * @description pinia 持久化参数配置
 * @param {String} key 存储到持久化的 name
 * @param {Array} paths 需要持久化的 state name
 * @return persist
 * */
const piniaPersistConfig = (key: string, paths?: string[]) => {
    const persist: PersistedStateOptions = {
        key,
        storage: {
            setItem(key, value) {
                uni.setStorageSync(key, value) // [!code warning]
            },
            getItem(key) {
                return uni.getStorageSync(key) // [!code warning]
            },
        },
        // storage: sessionStorage,
        paths
    };
    return persist;
};

export default piniaPersistConfig;

然后在 定义缓存的内容就可以啦

复制代码
import { defineStore } from 'pinia'
import piniaPersistConfig from "./persist";//上面写的哪个文件
复制代码
export interface State {
  userInfo: any;
  globalData: any;
  timerLock: boolean;
  showLoading:boolean;
}
// @ts-ignore
export const useCommonStore = defineStore('pack-store', {
  persist: piniaPersistConfig("pack-store"),
  state: (): State => ({
    userInfo: {},
    globalData: {},
    timerLock: false, //是否关闭合成定时器
    showLoading:false,//loading是否显示
  }),
  getters: {},
  actions: {
    setuserInfo(state: State, data: any){
      this.userInfo = data;
    },
    setGlobalData(data: any){
      this.globalData = Object.assign({}, this.globalData, data);
      console.log("state.globalData", this.globalData);
    },
    logout(){
      uni.removeStorageSync("userInfo");
      uni.removeStorageSync("token");
      uni.removeStorageSync("openInfo");
      uni.clearStorage();
      uni.clearStorageSync();
      this.userInfo = {};
      this.timerLock = true;
    },
    setTimerLock (data: boolean){
      this.timerLock = data;
    },
    setChangeLoading(data:boolean){
      console.log("changeLoading",data)
      this.showLoading = data;
    },
  },
});
相关推荐
大米饭消灭者3 天前
Taro是怎么实现一码多端的【底层原理】
微信小程序·taro
FliPPeDround5 天前
Vitest Environment UniApp:让 uni-app E2E 测试变得前所未有的简单
微信小程序·e2e·前端工程化
FliPPeDround5 天前
微信小程序自动化的 AI 新时代:wechat-devtools-mcp 智能方案
微信小程序·ai编程·mcp
吴声子夜歌5 天前
小程序——布局示例
小程序
码云数智-大飞5 天前
如何创建自己的小程序,码云数智与有赞平台对比
微信小程序
luffy54595 天前
微信小程序页面使用类似filter函数的wxs语法
微信小程序·小程序
Slow菜鸟5 天前
微信小程序开发(二)目录结构完全指南
微信小程序·小程序
攀登的牵牛花5 天前
给女朋友写了个轻断食小程序:去老丈人家也是先动筷了
前端·微信小程序
前端小雪的博客.5 天前
【保姆级教程】uniAI 插件高效开发 uni-app 微信小程序(附实战案例)
微信小程序·uni-app·ai编程·uniai
小小王app小程序开发5 天前
海外盲盒小程序抽赏玩法分析(附跨境技术落地要点)
小程序