[uni-app]Pinia持久化

前言

开发小程序的 Pinia 持久化和网页端的 Pinia 持久化的方法较为相似，唯一的区别在于 ：网页端持久化使用的是 localStorage.setItem() 和 localStorage.getItem() 而小程序持久化使用的是 uni.setStorageSync() 和 uni.getStorageSync()

一、pinia 的定义导出

在实际开发时一般会创建一个 stores 文件夹来存储公共库如 vuex 或者是 pinia，然后在 stores 中创建 module 文件夹存放不同模块的 pinia 库，最后在 module 文件夹中创建 js/ts 文件，在此文件中进行 pinia 的定义和导出

为了便于维护，最好创建多个 pinia 库来对不同模块分别管理

// stores/modules.member.js
import { defineStore } from 'pinia'
import { ref } from 'vue'

//定义Store并进行导出
//定义Store有两种方式：option选项式和setup组合式,这里使用的是组合式
export const useMemberStore = defineStore(
'member',
  () => {
  //导出的store最好以useXXXXStore的方式命名
    //组合式用ref()存储数据，而选项式在state方法中存储
    const profile = ref()
    const setProfile = (val) => {
      profile.value = val
    }
    const clearProfile = () => {
      profile.value = undefined
    }
    // 记得 return，导出存储的数据和方法
    return {
      profile,
      setProfile,
      clearProfile,
    }
  },
  //pinia持久化，必须在使用持久化插件后才能设置
  {
    // persist: true 是用来给网页端持久化的
    persist: {
      storage: {
        getItem(key) {
          return uni.getStorageSync(key)
        },
        setItem(key, value) {
          return uni.setStorageSync(key, value)
        }
      }
    }
  }
)

二、pinia 持久化插件

如果是在 uni-app 项目使用 pinia 持久化，除了需要下载 pinia 之外，还需要下载适配的持久化插件

pinia: npm install pinia
plugin: pnpm i pinia-plugin-persistedstate

在下载完成后还需要在 stores 文件夹下额外创建一个 index. js 文件用来给 pinia 实例化并且启用持久化

import { createPinia } from 'pinia'
import persist from 'pinia-plugin-persistedstate'
  
// 创建 pinia 实例
const pinia = createPinia()
// 使用持久化存储插件
pinia.use(persist)

// 默认导出
export default pinia
// 模块统一导出
export * from './modules/member'

三、pinia 的使用

在需要使用 Store 中存储的数据和方法，只需要进行如下操作即可

<script setup lang="ts">
import { useMemberStore } from '@/stores'
const memberStore = useMemberStore()
</script>

具体使用和vue中pinia的操作方法相同~

——>pinia的官方文档