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

主要通過taro的getStorageSync,setStorageSync實現配置持久化

// 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: {// 調整為兼容多端的APIstorage: {setItem(key, value) {setStorageSync(key, value) // [!code warning]},getItem(key) {return getStorageSync(key) // [!code warning]}},}
})

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/bicheng/90495.shtml
繁體地址,請注明出處:http://hk.pswp.cn/bicheng/90495.shtml
英文地址,請注明出處:http://en.pswp.cn/bicheng/90495.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

抖音小游戲好做嗎?

從0到1&#xff0c;教你打造爆款抖音小游戲隨著移動互聯網的發展&#xff0c;抖音小游戲憑借便捷即玩、流量龐大等優勢&#xff0c;成為游戲開發者的熱門選擇。想知道如何開發出一款吸睛又好玩的抖音小游戲嗎&#xff1f;下面就為你詳細介紹開發流程。一、前期規劃明確游戲類型…

Spring Boot 3核心技術面試指南:從遷移升級到云原生實戰,9輪技術攻防(含架構解析)

面試官&#xff1a;cc程序員&#xff0c;聊聊Spring Boot 3的那些事兒&#xff1f; 場景背景 互聯網大廠云原生架構部面試官老王&#xff0c;與自稱"Spring Boot骨灰粉"的cc程序員展開技術對決。 面試過程 第一輪&#xff1a;遷移升級 面試官&#xff1a;Spring Boot…

技術演進中的開發沉思-42 MFC系列:Components 與 ActiveX Controls

點擊程序啟動時&#xff0c;是不是看過有加載的畫面。在VC開發時&#xff0c;可使用 VC 的 Component Gallery&#xff0c;找到 Splash screen 組件&#xff0c;當時覺得組件就是給程序員的暖手寶。一、Component GalleryComponent Gallery 在 VC 里的位置很特別 —— 它藏在 “…

抽象類、接口、枚舉

第八天&#xff08;堅持&#xff09;抽象類1.什么是抽象類&#xff0c;作用特點。抽象類是面向對象編程中一種特殊的類&#xff0c;它不能被實例化&#xff0c;主要用于作為其他類的基類&#xff08;父類&#xff09;。抽象類的主要作用是定義公共結構和行為規范&#xff0c;同…

在Ubuntu上使用QEMU仿真運行ARM匯編

ARM匯編一般無法在PC上直接運行&#xff0c;因為ARM和x86架構是不一樣的。但是很多時候用ARM開發板是很不方便的&#xff0c;所以能不能直接在PC上仿真運行ARM匯編來練習呢&#xff1f;當然可以&#xff0c;那就是&#xff1a;使用QEMU來仿真。這篇文章我們就來演示下如何在Ubu…

【趣味解讀】淘寶登錄的前后端交互機制:Cookie-Session 如何保障你的賬戶安全?

在現代Web應用中&#xff0c;前后端交互是核心功能之一&#xff0c;而用戶認證又是其中最關鍵的部分。本文將以淘寶登錄為例&#xff0c;詳細解析基于Cookie-Session的前后端交互流程&#xff0c;幫助開發者理解這一常見的安全認證機制。生動理解一下什么是cookie和seesion我們…

貪心算法(基礎算法)

1.引言 ok啊&#xff0c;拖更這么長時間也是沒有壓力&#xff08;doge&#xff09; 不說啥&#xff0c;直接進入正題。 2.概念 這個貪心算法呢&#xff0c;看名字就知道&#xff0c;不就是每個步驟都挑最好的嘛&#xff0c;有啥難的。 這么說的話......其實確實&#xff0c…

簡單的mcp 服務示例

參考&#xff1a;https://www.bilibili.com/video/BV1nyVDzaE1x 編寫自己的tools.py #### tools.py from pathlib import Path import osbase_dir Path("./test")def read_file(name: str) -> str:"""Return file content. If not exist, return …

DeepSeek-R1+豆包迭代一次完成中國象棋游戲

DeepSeeek- R1生成的棋盤符合中國象棋風&#xff0c;單獨豆包無法畫好象棋棋盤。提示詞&#xff1a;使用html實現中國象棋游戲&#xff0c;要求支持人機對弈。等等&#xff0c;你需要實現完整版本。代碼如下&#xff08;電腦走棋不對&#xff09;&#xff1a;<!DOCTYPE html…

阿里通義千問Qwen3深夜升級:架構革新+性能碾壓

&#xff08;以下借助 DeepSeek-R1 & Grok3 輔助整理&#xff09; 北京時間2025年7月22日凌晨&#xff0c;阿里云通義千問團隊發布了Qwen3旗艦模型的最新更新——Qwen3-235B-A22B-Instruct-2507-FP8。這一更新不僅在性能上實現了突破&#xff0c;還標志著開源大模型技術架…

pip關于緩存的用法

pip cache info查看 pip 緩存的大小&#xff0c;運行示例 Package index page cache location (pip v23.3): c:\users\xxx\appdata\local\pip\cache\http-v2 Package index page cache location (older pips): c:\users\xxx\appdata\local\pip\cache\http Package index page c…

嵌入式學習-(李宏毅)機器學習(2)-day29

十五個作業不同類型的Functions兩大類任務一個是Regression&#xff08;回歸&#xff09; 一個是 Classification&#xff08;分類&#xff09;一個是給出一個數值&#xff0c;一個是從類別中選擇一個還有一類任務 Structured Learning 機器要學會創造文件 機器學習預測頻道第…

【C++11】哈希表與無序容器:從概念到應用

文章目錄一、前言二、哈希表&#xff08;Hash Table&#xff09;1. 基本概念2. 哈希函數3. 沖突解決方法鏈地址法&#xff08;Separate Chaining&#xff09;開放尋址法&#xff08;Open Addressing&#xff09;4. 性能分析5. 動態擴容6. 應用場景7. 優缺點二. 無序容器的介紹1…

【智能大數據分析 | 實驗二】Spark實驗:部署Spark集群

【作者主頁】Francek Chen 【專欄介紹】???智能大數據分析??? 智能大數據分析是指利用先進的技術和算法對大規模數據進行深入分析和挖掘&#xff0c;以提取有價值的信息和洞察。它結合了大數據技術、人工智能&#xff08;AI&#xff09;、機器學習&#xff08;ML&#xf…

使用pymongo進行MongoDB的回收

在 PyMongo 中使用 compact 命令進行 MongoDB 碎片回收的完整操作指南如下&#xff1a; 一、核心執行方法 from pymongo import MongoClient import time# 1. 連接到 MongoDB 實例 client MongoClient("mongodb://username:passwordhost:27017/dbname?authSourceadmin&q…

Azure DevOps 使用服務主體配置自托管代理 (Self-hosted Agent) 配置指南

Azure DevOps 使用服務主體配置自托管代理配置指南1. 概述2. 在 Azure AD 中創建服務主體 (SP)3. 授予 Azure DevOps 權限3.1. 組織層級&#xff1a;用戶身份與訪問級別3.2. 組織層級&#xff1a;Agent pools管理員3.3. 在 Linux VM 上安裝和配置代理3.4. 啟動并設置為系統服務…

Java學習第六十四部分——Nginx

目錄 一、前言提要 二、核心特點 三、核心作用 四、架構優勢 五、應用場景 六、常用命令 七、性能對比——Nginx vs Apache 八、典型用戶 九、配置示例 十、Java應用需配合的配置 十一、性能優化策略 十二、常見問題排查 十三、文件結構配置 十四、總結歸納概述 …

幾個常用的Oxygen編輯器插件

Oxygen XML Editor是羅馬尼亞的SyncroSoft公司開發的結構化文檔編輯和發布軟件。 除了Oxygen編輯器帶的功能&#xff0c;它還提供了豐富的插件來提供額外的功能來輔助資料開發人員更高效率、更低成本地開發結構化資料。 本文介紹幾個比較常用和有用的插件。 - 1 - Git Clie…

基于springboot的軟件缺陷管理跟蹤平臺

博主介紹&#xff1a;java高級開發&#xff0c;從事互聯網行業六年&#xff0c;熟悉各種主流語言&#xff0c;精通java、python、php、爬蟲、web開發&#xff0c;已經做了六年的畢業設計程序開發&#xff0c;開發過上千套畢業設計程序&#xff0c;沒有什么華麗的語言&#xff0…

【LINUX】Centos 9使用nmcli更改IP

1. 查看連接名稱 nmcli connection show輸出類似&#xff1a; NAME UUID TYPE DEVICE Wired connection 1 xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx ethernet enp1s02. 修改 IP 地址&#xff08;以靜態 IP 為例&#xf…