uniapp项目实战第五章：小程序Pinia持久化

傷城~ 2024-03-24 18:09 39阅读 0赞

## 小程序Pinia持久化 ##

说明：项目中 Pinia 用法平时完全一致，主要解决持久化插件**兼容性**问题。

#### 持久化存储插件 ####

持久化存储插件： [pinia-plugin-persistedstate][]

插件默认使用 `localStorage` 实现持久化，小程序端不兼容，需要替换持久化 API。

**网页端持久化 API**

// 网页端API
    localStorage.setItem()
    localStorage.getItem()

**多端持久化 API**

// 兼容多端API
    uni.setStorageSync()
    uni.getStorageSync()

**参考代码**  
![在这里插入图片描述][e720e26ffb654a74a317e261a766dba7.png]

// stores/modules/member.ts
    export const useMemberStore = defineStore(
      'member',
      () => {
        
        //…省略
      },
      {
        
        // 配置持久化
        persist: {
        
          // 调整为兼容多端的API
          storage: {
        
            setItem(key, value) {
        
              uni.setStorageSync(key, value) // [!code warning]
            },
            getItem(key) {
        
              return uni.getStorageSync(key) // [!code warning]
            },
          },
        },
      },
    )

*  现在可以持续化了  
    ![在这里插入图片描述][9144226d8b6748b1bc2f90f30f01ba6e.png]

![在这里插入图片描述][b3a16c5e4a85496494eee2ba7f7033a9.png]

[pinia-plugin-persistedstate]: https://prazdevs.github.io/pinia-plugin-persistedstate/guide/config.html#storage
[e720e26ffb654a74a317e261a766dba7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/7114df3468a440729b89f69e4d8329ee.png
[9144226d8b6748b1bc2f90f30f01ba6e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/fc12c310036b4710b281cb7756ec440c.png
[b3a16c5e4a85496494eee2ba7f7033a9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/10a7a365651d4cfca402b50e824d5e0c.png