taro+pinia+小程序存储配置持久化

主要通过taro的getStorageSync,setStorageSync实现配置持久化

js 复制代码
// https://pinia.esm.dev/introduction.html
import { defineStore } from 'pinia';
import { CreditCardDateUtils } from '@/untils/compute';
import { getStorageSync, setStorageSync } from "@tarojs/taro";


interface dataType {
  id: string,
  name: string,
  statementDay: number,//出账日
  dueDay: number,//还款日
  dueDate?: string,//还款日
  freeDay?: number,//免息天数
  currentFreeDay: number,//剩余免息天数
  isCurrentCycle: boolean,//是否本周期
}

export const useCardStore = defineStore('card', {
  state: () => {
    return {
      _cardData: <dataType[]>[],
    };
  },
  getters: {
    getCardInfo: state => {
      return (id: string) => state._cardData.find((item) => (item.id === id));
    },
    getCardDataList: state => {
      return () => state._cardData;
    },
    getIndexCardDataList: state => {
      const dataList = state._cardData.map((item) => {
        const creditCardUtils = new CreditCardDateUtils(Number(item.statementDay), Number(item.dueDay));
        item.freeDay = creditCardUtils.calculateMonthlyGracePeriod();
        item.currentFreeDay = creditCardUtils.calculateGracePeriodDays();
        const { dueDate, isCurrentCycle } = creditCardUtils.getCreditCardDueDate();
        item.dueDate = dueDate.toLocaleDateString();
        item.isCurrentCycle = isCurrentCycle;
        return item;
      }).sort((a, b) => {
        // 1. 当前周期的卡片优先
        if (a.isCurrentCycle && !b.isCurrentCycle) return -1;
        if (!a.isCurrentCycle && b.isCurrentCycle) return 1;

        // 2. 同一周期内按剩余免息天数降序排列
        return b.currentFreeDay - a.currentFreeDay;
      });
      console.log(dataList, 'dataList')
      return () => dataList;
    }
  },
  actions: {
    delCardData(id: string) {
      this._cardData = this._cardData.filter((item) => item.id !== id);
      console.log(id);
      console.log(this._cardData);
    },
    setCardData(cardData: dataType) {
      const index = this._cardData.findIndex((item: dataType) => item.id == cardData.id);
      console.log(this._cardData, 'this._cardData');
      console.log(cardData, 'cardData');
      console.log(index, 'index');
      if (index <= -1) {
        this._cardData.push(cardData);
      } else {
        this._cardData[index] = cardData;
      }
    },
  },
  // persist: true,
  // 配置持久化
  persist: {
    // 调整为兼容多端的API
    storage: {
      setItem(key, value) {
        setStorageSync(key, value) // [!code warning]
      },
      getItem(key) {
        return getStorageSync(key) // [!code warning]
      }
    },
  }
})
相关推荐
杨进军11 小时前
模拟 Taro 实现编译多端样式文件
前端·taro
说私域13 小时前
短视频私域流量池的变现路径创新:基于AI智能名片链动2+1模式S2B2C商城小程序的实践研究
大数据·人工智能·小程序
毕设源码-邱学长15 小时前
【开题答辩全过程】以 基于微信小程序的松辽律所咨询系统的设计与实现为例,包含答辩的问题和答案
微信小程序·小程序
+VX:Fegn089517 小时前
计算机毕业设计|基于springboot + vue物流配送中心信息化管理系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·小程序·课程设计
说私域17 小时前
B站内容生态下的私域流量运营创新:基于AI智能名片链动2+1模式与S2B2C商城小程序的融合实践
人工智能·小程序·流量运营
计算机毕设指导617 小时前
基于微信小程序的钓鱼论坛系统【源码文末联系】
java·spring boot·mysql·微信小程序·小程序·tomcat·maven
qq_124987075317 小时前
基于微信小程序的宠物交易平台的设计与实现(源码+论文+部署+安装)
java·spring boot·后端·微信小程序·小程序·毕业设计·计算机毕业设计
计算机毕设指导620 小时前
基于微信小程序的精致护肤购物系统【源码文末联系】
java·spring boot·微信小程序·小程序·tomcat·maven·intellij-idea
sheji34161 天前
【开题答辩全过程】以 基于微信小程序的在线学习系统为例,包含答辩的问题和答案
学习·微信小程序·小程序
头发还在的女程序员1 天前
小剧场短剧影视小程序源码分享,搭建自己的短剧小程序
人工智能·小程序·短剧·影视·微剧