pinia持久化存储与使用

安装持久化插件pinia-plugin-persistedstate

npm装

使用时问题

1.写在请求里的化记得变量声明写在请求拦截器里面

实现

store/index.ts 中使用persist持久化

import { createPinia } from 'pinia'

import persist from 'pinia-plugin-persistedstate' //导入持久化插件

// 创建pinia实例

const pinia = createPinia()

// 使用pinia插件

pinia.use(persist)

// 导出pinia实例，给main使用

export default pinia

export * from './user'

封装 hooks

store/user.ts

// import type { User } from '@/types/user'

import { defineStore } from 'pinia'

import { ref } from 'vue'

export const useUserStore = defineStore('cp-user', () => {

  // 用户信息

  const name = ref<any>()

  const token = ref<any>()

  const show = ref<any>()

  // 设置用户，登录后使用

  const setUser = (u: any,n:any,b:any) => {

    name.value = u

    token.value = n

    show.value = b

  }

  // 清空用户，退出后使用

  const delUser = () => {

    name.value = undefined

    token.value = undefined

    show.value = undefined

  }

  return { name,token,show, setUser, delUser }

}, {

  persist:true // 开启持久化

})

//main.ts挂载

import pinia from './store'

app.use(pinia)