vue3的状态管理（pinia）持久化解决方案

vue3中数据持久化插件pinia-plugin-persistedstate

因为vue的store是存在内存中的，并不能持久化的存储，然而我们有把数据做持久化的需求

解决

第三方插件pinia-plugin-persistedstate,其实这个插件是把数据存入localStorage进行持久化存储的

• 安装

pnpm i pinia-plugin-persistedstate
# or
npm i pinia-plugin-persistedstate
# or
yarn add pinia-plugin-persistedstate

• main.js

import persist from 'pinia-plugin-persistedstate'
const app = createApp(App)

app.use(createPinia())
//使用插件
app.use(createPinia().use(persist))

• store/user.ts

import type { User } from '@/types/user'
import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useUserStore = defineStore(
  'cp-user',
  () => {
    // 用户信息
    const user = ref<User>()
    // 设置用户，登录后使用
    const setUser = (u: User) => {
      user.value = u
    }
    // 清空用户，退出后使用
    const delUser = () => {
      user.value = undefined
    }
    return { user, setUser, delUser }
  },
  {
    persist: true
  }
)

• 测试

<script setup lang="ts">
import { useUserStore } from './stores/user'

const store = useUserStore()
</script>

<template>
  <p>{{ store.user }}</p>
  <button @click="store.setUser({ id: '1', mobile: '1', account: '1', avatar: '1', token: '1' })">
    登录
  </button>
  <button @click="store.delUser()">退出</button>
</template>