动态

详情 返回 返回

uniapp微信小程序pinia持久化緩存

HBuilder X自帶pinia,無需我們手動安裝。

我們通過pinia-plugin-persistedstate插件來實現pinia的持久化緩存

npm i pinia-plugin-persistedstate

本身 pinia-plugin-persistedstate 是不支持 uniapp 的,但是 pinia-plugin-persistedstate 提供了修改 storage 存儲 API 的方式(默認是 localStorage,是一個 WEB API,非H5端 不支持),關鍵代碼如下:
/store/index.js

import { createPinia } from 'pinia'
import { createPersistedState } from 'pinia-plugin-persistedstate' // 數據持久化

const store = createPinia()
store.use(
  createPersistedState({
    storage: {
      getItem: uni.getStorageSync, // 看這裏
      setItem: uni.setStorageSync, // 看這裏
    },
  }),
)

通過修改pinia-plugin-persistedstate的存儲API來實現兼容uniapp
在mian.js中掛載

import { createSSRApp } from 'vue'
import pinia from "@/store/index.js"; // 引入
export function createApp() {
    const app = createSSRApp(App);
  
    app.use(pinia); // 安裝

    return {
        app,
        pinia
    }
}

對應的store,通過配置persist實現指定變量持久緩存

import { defineStore } from 'pinia';
import { ref } from "vue"

const userInfoStore = () => {
  
    const ignore = ref({
          me: 'not-saved',
          notMe: 'saved',
        })
  
    const ignoreMeToo = ref('not-saved')
  
    return {
        ignore,
    ignoreMeToo
    };
};

export const useUserInfoStore = defineStore('user-info', userInfoStore, {
  // persist: true, // 緩存當前store所有變量
  // persist: false, // 不緩存當前store的變量
    persist: {
    key: 'user-info',
    pick: ['ignore.me', 'ignoreMeToo']
  }
});

可以配置緩存指定的變量,或對象裏的某一個變量
persistkey是可選的,如果不設置,則取defineStorekey,設置則取persist.key,如果你兩個都設置了,名稱儘量保持一致,看起來更符合直覺,它們對應的是本地緩存Storage裏的Key

其它相關配置,可參考:pinia-plugin-persistedstate


參考文檔:
狀態管理 Pinia
unibase-狀態篇
pinia-plugin-persistedstate

user avatar
0 用户, 点赞了这篇动态!

发布 评论

Some HTML is okay.