小程序端pinia持久化

index.ts

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

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

main.ts

TypeScript 复制代码
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,
  }
}

member.ts

TypeScript 复制代码
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: {
      storage: {
        getItem(key) {
          return uni.getStorageSync(key)
        },
        setItem(key, value) {
          uni.setStorageSync(key, value)
        }
      }
    }
  },
)

my.vue

TypeScript 复制代码
<script setup lang="ts">
import { useMemberStore } from '@/stores'

const memberStore = useMemberStore()
</script>

<template>
  <view class="my">
    <view>会员信息:{{ memberStore.profile }}</view>
    <button
      @tap="
        memberStore.setProfile({
          nickname: '黑马先锋',
        })
      "
      size="mini"
      plain
      type="primary"
    >
      保存用户信息
    </button>
    <button @tap="memberStore.clearProfile()" size="mini" plain type="warn">清理用户信息</button>
  </view>
</template>
相关推荐
Vertira几秒前
pdf 合并 python实现(已解决)
前端·python·pdf
PeterJXL35 分钟前
Chrome 下载文件时总是提示“已阻止不安全的下载”的解决方案
前端·chrome·安全
hackchen1 小时前
从0到1解锁Element-Plus组件二次封装El-Dialog动态调用
前端·vue.js·elementui
君子宜耘心1 小时前
el-table虚拟列表封装
前端
黄瓜沾糖吃1 小时前
大佬们指点一下倒计时有什么问题吗?
前端·javascript
温轻舟1 小时前
3D词云图
前端·javascript·3d·交互·词云图·温轻舟
buibui1 小时前
打包一个工具类
前端
巴别塔的饿灵1 小时前
Webpack[TBC]
前端
LinHan1 小时前
我的浏览器插件 Horizon-Hop 又又又更新啦!
前端
一个小潘桃鸭1 小时前
需求:el-upload实现上传/粘贴图片功能
前端