vue3 学习记录 uniapp如何实现Pinia的持久化存储

前言

在使用uniapp开发小程序的时候，项目数据交互比较复杂，这个时候我们可以使用Pinia来进行数据和状态的管理，其中有些数据是需要一直保存比如：用户登录数据、token等.

这边我就来记录一下Pinia在uniapp中的数据持久化是如何实现的

安装Pinia和配置持久化

在uni-app的Vue3版本中，Pinia已被内置，无需额外安装即可直接使用（Vue2版本则内置了Vuex）。

安装Pinia持久化插件

npm i pinia-plugin-persistedstate

在我们的根目录下创建stores文件夹，新建index.js文件

import { createPinia } from 'pinia'
import persist from 'pinia-plugin-persistedstate'

// 创建 pinia 实例
const pinia = createPinia()
// 使用持久化存储插件
pinia.use(persist)

// 默认导出，给 main.ts 使用
export default pinia

// 模块统一导出
export * from './modules/member'

main.js下添加挂载pinia代码

import { createSSRApp } from 'vue'
import pinia from './stores'
import App from './App.vue'
export function createApp() {
  const app = createSSRApp(App)
  app.use(pinia)
  return {
    app,
  }
}

在stores目录下新建modules文件夹，在其下新建member.ts测试代码

import { defineStore } from 'pinia'
import { ref } from 'vue'
    
// 定义 Store
export const useMemberStore = defineStore(
  'member',
  () => {
    // 会员信息
    const profile = ref<any>()

    // 保存会员信息，登录时使用
    const setProfile = (val: any) => {
      profile.value = val
    }

    // 清理会员信息，退出时使用
    const clearProfile = () => {
      profile.value = undefined
    }

    // 记得 return
    return {
      profile,
      setProfile,
      clearProfile,
    }
  },
  // TODO: 持久化
  {
    // 网页端配置
    // persist: true,
    // 小程序端配置
    persist: {
      // 调整为兼容多端的api
      storage: {
        getItem(key) {
          return uni.getStorageSync(key)
        },
        setItem(key, value) {
          uni.setStorageSync(key, value)
        }
      }
    }
  },
)

测试代码

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

// test http
const getData = async () => {
  let res = await http<string[]>({
    url: '/home/banner',
    method: 'GET',
  })
  console.log(res);
}
</script>

<template>
  <view class="my">
    <view>会员信息：{{ memberStore.profile }}</view>
    <button @tap="
      memberStore.setProfile({
        nickname: 'test用户',
      })
      " size="mini" plain type="primary">
      保存用户信息
    </button>
    <button @tap="memberStore.clearProfile()" size="mini" plain type="warn">清理用户信息</button>
    <button size="mini" plain type="primary" @tap="getData">测试请求</button>
  </view>
</template>

<style lang="scss">
</style>

最终效果

这样就可以实现在uniapp中Pinia的持久化存储了