?上一篇文章完成了 Pinia 在釘釘小程序中的引入與基礎配置
文章地址：釘釘小程序框架引入 Pinia 狀態管理-CSDN博客
本文將深入探討如何通過Pinia 結合持久化存儲 實現用戶狀態
在上一章節中，我們已經完成了 Pinia 在釘釘小程序中的引入與基礎配置。本章將進一步深入探討如何通過 Pinia 結合持久化存儲 實現用戶狀態、應用設置等關鍵數據的持久保存，并結合實際場景封裝一個通用的 持久化工具類。
我們將使用 uni.setStorageSync 和 uni.getStorageSync 這兩個釘釘小程序兼容的 API 來實現本地存儲，同時借助 Pinia 的 store 模塊機制進行統一的狀態管理。
一、為什么需要持久化 Pinia Store
在開發釘釘小程序時，有些數據是需要跨頁面甚至跨會話保留的，例如：
- 用戶登錄信息（token、用戶ID）
- 應用主題設置
- 緩存數據（如歷史記錄、最近訪問內容）
如果不做持久化處理，當用戶關閉小程序后再次打開時，這些狀態將會丟失。
二、Pinia + 持久化方案設計
1. 持久化策略概述
我們采用如下策略：
- 在 Pinia 的 store 初始化時從本地緩存讀取初始值；
- 在每次狀態變更時自動寫入本地緩存；
- 提供一個可復用的工具類來統一管理存儲邏輯。
2. 技術選型說明
| 技術點 | 選擇理由 |
|---|---|
Pinia | Vue3 推薦的狀態管理庫，類型友好，模塊化清晰 |
TypeScript | 強類型支持，提升代碼健壯性 |
UniApp API | 使用?uni.setStorageSync?等 API 兼容多端 |
三、封裝持久化工具類
1. 我們可以創建一個 utils/storage.ts 工具類用于封裝常用的本地存儲方法。
/*** 存儲工具類* @author: 歸夢工作室*/
const STORAGE_PREFIX = 'gm_';export const setStorage = <T>(key: string, value: T): void => {try {uni.setStorageSync(`${STORAGE_PREFIX}${key}`, value);} catch (e) {console.error(`[Storage] Set failed for key ${key}`, e);}
};export const getStorage = <T>(key: string, defaultValue: T | null = null): T | null => {try {const value = uni.getStorageSync(`${STORAGE_PREFIX}${key}`);return value !== undefined ? (value as T) : defaultValue;} catch (e) {console.error(`[Storage] Get failed for key ${key}`, e);return defaultValue;}
};export const removeStorage = (key: string): void => {uni.removeStorageSync(`${STORAGE_PREFIX}${key}`);
};export const clearStorage = (): void => {uni.clearStorageSync();
};五、Pinia Store 中集成持久化邏輯
1. 創建一個帶持久化的 Store 示例
以 userStore 為例：
文件位置：src/store/user.ts
import { defineStore } from 'pinia';
import { getStorage, setStorage } from '@/utils/storage';interface UserState {token: string | null;userInfo: Record<string, any> | null;
}export const useUserStore = defineStore('user', {state: (): UserState => ({token: getStorage<string>('token', null),userInfo: getStorage<Record<string, any>>('userInfo', null),}),actions: {setToken(token: string | null) {this.token = token;if (token) {setStorage('token', token);} else {uni.removeStorageSync('token');}},setUserInfo(userInfo: Record<string, any> | null) {this.userInfo = userInfo;if (userInfo) {setStorage('userInfo', userInfo);} else {uni.removeStorageSync('userInfo');}},},
});2. 測試持久化存儲
<template><view class="content"><view>測試pinia持久化</view><view>vuex: {{ userData }}</view><view>storage: {{ getStorage('userInfo') }}</view></view><view><ant-button @tap="savaToken">存儲 token</ant-button><ant-button @tap="savaUserInfo">存儲 userInfo</ant-button><ant-button @tap="getUserInfo">獲取 userInfo</ant-button><ant-button @tap="clearStorage">清空 storage</ant-button></view>
</template><script setup lang="ts">
import {ref} from 'vue'
import {useUserStore} from "@/store/user";
import { getStorage, clearStorage } from '@/utils/storage';const userStore = useUserStore()const userData = ref({})const userInfo = ref({name: '張三',age: 18
})const token = ref('123456')const savaToken = () => {userStore.setToken(token.value)
}
const savaUserInfo = () => {userStore.setUserInfo(userInfo.value)
}
const getUserInfo = () => {userData.value = userStore.getUserInfo()
}</script><style>
.content {display: flex;flex-direction: column;align-items: center;justify-content: center;
}.logo {height: 200rpx;width: 200rpx;margin-top: 200rpx;margin-left: auto;margin-right: auto;margin-bottom: 50rpx;
}.text-area {display: flex;justify-content: center;
}.title {font-size: 36rpx;color: #8f8f94;
}
</style>
點擊存儲token和存儲userInfo
點擊清空storage
最后點擊獲取userInfo
測試完成！！！一切順利！！！
最后附上代碼地址：
GitCode - 全球開發者的開源社區,開源代碼托管平臺
分支：storage
)
