vue3 之 Pinia数据持久化

持久化用户数据说明
1️⃣用户数据中有一个关键的数据叫做token（用来标识当前用户是否登陆），而token持续一段时间才会过期
2️⃣Pinia的存储是基于内存，刷新就丢失，为了保持登陆状态就要做到刷新不丢失，需要配合持久话进行存储

实现效果
操作state时自动把用户数据在本地的localStorege也存一份，刷新的时候会从localStorege中先取出

运行机制
在设置state的时候会自动把数据同步给localstorage，在获取state数据的时候会优先从localstorage中取

pinia-plugin-persistedstate适用于pinia的持久化存储插件
插件地址

安装

npm i pinia-plugin-persistedstate

main.js注册

import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

在stores/user.js使用

// 管理用户数据相关
import { defineStore } from 'pinia'
import { ref } from 'vue'
import { loginAPI } from '@/apis/user'
export const useUserStore = defineStore('user', () => {
  // 1. 定义管理用户数据的state
  const userInfo = ref({})
  // 2. 定义获取接口数据的action函数
  const getUserInfo = async ({ account, password }) => {
    const res = await loginAPI({ account, password })
    userInfo.value = res.result
  }
  // 3. 以对象的格式把state和action return
  return {
    userInfo,
    getUserInfo
  }
}, {
  //持久化配置
  persist: true,
})