安装持久化插件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)