vue3中使用pinia和持久化状态插件pinia-plugin-persistedstate

1.安装

用你喜欢的包管理器安装 pinia：

yarn add pinia
# 或者使用 npm
npm install pinia

2.使用

创建一个 pinia 实例 (根 store) 并将其传递给应用：

// store下的index.ts文件

// 持久化状态插件
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

import { UserStore } from './modules/user'
import { createPinia } from 'pinia'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

export { UserStore }
export default pinia

// 在src 下的main.ts文件中

import { createApp } from 'vue'
import store from '@/store'

const app = createApp(App)
app.use(store)

// module下的UserStore.ts文件

import { defineStore } from 'pinia'

// 该方法返回持久化配置参数
import piniaPersistConfig from '@/config/piniaPersist'
// 定义的ts接口文件
import { UserState } from '../interface'
// 获取用户信息的接口
import { getAuthInfo } from '@/api/orion'

export const UserStore = defineStore('UserState', {
  state: (): UserState => ({
    token: '',
    user_id: undefined,
    user_name: undefined,
    real_name: undefined,
    avatar: undefined,
    organization: undefined,
    location: undefined,
    email: undefined,
    roleList: [],
    isAdmin: false
  }),
  actions: {
    setUserName(name: string) {
     this.user_name = name
    },
    setToken(token: string) {
    this.token = token
    },
    // 设置用户的信息
    setInfo(partial: Partial<UserState>) {
    // 将一个 state 补丁应用于当前状态。允许传递嵌套值
      this.$patch(partial)
    },
    async userAuth() {
      const res: any = await getAuthInfo()
      const { userName, userId, realName } = res
      this.setInfo({ user_name: userName, user_id: userId, real_name: realName })
    },
    // 重置用户信息
    resetInfo() {
      this.$reset()
    }
  },
  // 状态持久化配置
  persist: piniaPersistConfig('UserState')
})

// piniaPersistConfig方法所在的文件

import { PersistedStateOptions } from 'pinia-plugin-persistedstate'

// pinia持久化参数配置
const piniaPersistConfig = (key: string) => {
  const persist: PersistedStateOptions = {
    key,
    storage: window.localStorage
  }
  return persist
}

export default piniaPersistConfig

// interface下的index.ts文件

import { RouteRecordRaw } from 'vue-router'

export interface UserState {
  token: string
  user_id: number | undefined
  user_name: string | undefined
  real_name: string | undefined
  avatar?: string
  organization?: string
  location?: string
  email?: string
  roleList: string[]
  isAdmin: boolean
}

3.在组件中使用

<template>
  <div class="tool-bar-right">
  {{ username }}
  </div>
</template>
<script lang="ts" setup>
import { UserStore } from '@/store'
const userStore = UserStore()
const username = computed(() => userStore.user_name)
</script>
<style lang="scss" scoped>

</style>