小程序端pinia持久化

本文主要是介绍小程序端pinia持久化，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

index.ts

// 创建 pinia 实例
const pinia = createPinia()
// 使用持久化存储插件
pinia.use(persist)// 默认导出，给 main.ts 使用
export default pinia

main.ts

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

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}// 记得 returnreturn {profile,setProfile,clearProfile,}},// TODO: 持久化{persist: {storage: {getItem(key) {return uni.getStorageSync(key)},setItem(key, value) {uni.setStorageSync(key, value)}}}},
)

my.vue

<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"plaintype="primary">保存用户信息</button><button @tap="memberStore.clearProfile()" size="mini" plain type="warn">清理用户信息</button></view>
</template>

这篇关于小程序端pinia持久化的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---