Vue3 + ts+ pinia作持久化存储（包含史上最细使用示例）

一、安装pinia和持久化插件

npm install pinia pinia-plugin-persistedstate

二、使用

1.在stores目录下创建index.ts

// stores/index.ts
import { createPinia } from "pinia";
import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
const store = createPinia();
store.use(
  // 默认即为JSON序列化
  piniaPluginPersistedstate
);
export default store;

2.在main.ts中引入

import { createApp } from 'vue'
// 引入pinia状态管理库
import store from './stores';
import App from './App.vue'
const app = createApp(App)
app.use(store)
app.mount('#app')

3.举个栗子

场景：在登录时，将用户信息缓存至user.ts模块中，用户信息包括userInfo对象，和token字符串两部分

import { reactive, ref } from "vue";
import { defineStore, acceptHMRUpdate } from "pinia";
// 定义userInfo对象数据
interface userType {
  id?: string;
  username?: string;
  nickname?: string;
  avatar?: null | string;
  email?: null | string;
  roles?: string;
  createTime?: string;
  updateTime?: string;
}
export const useUser = defineStore(
  "userInfo",
  () => {
    let userInfo = reactive({
      data: {} as userType,
    });
    let token = ref<string>("");
    // 设置userInfo信息
    const setUserInfo = (obj: userType = {}) => {
      userInfo.data = { ...obj };
    };
    // 设置token
    const setToken = (str: string = "") => {
      token.value = str;
    };
    // 清空缓存
    const clearStorage = () => {
      setUserInfo();
      setToken();
    };
    return { userInfo, token, setUserInfo, setToken };
  },
  {
    persist: {
      // 存储方式 默认为localStorage
      storage: window.sessionStorage
    },
  }
);
// 热更新 编辑你的 store，并直接在你的应用中与它们互动，
// 而不需要重新加载页面，允许你保持当前的 state、并添加甚至删除 state、action 和 getter。
if (import.meta.hot) {
  import.meta.hot.accept(acceptHMRUpdate(useUser, import.meta.hot));
}

页面内使用：使用user.ts中定义的字段

<template>
  <div class="header">
    <div>
      欢迎你 {{ userInfo.data.nickname }}
    </div>
  </div>

</template>
<script setup lang="ts">
// 引入 store
import { useUser } from '@/stores/user';
const userStore = useUser()
// 使用nickename 字段有两种使用方式：
// 1. 直接使用userStore.userInfo.data.nickname
// 2. 使用storeToRefs引用对象 引入后，userInfo被解构为ref对象（原先为reactive对象）
// 故要.value(在模板中不需要.value) 
import { storeToRefs } from 'pinia';
const { userInfo } = storeToRefs(userStore)
// 如：userInfo.value.data.nickname
// 两者均有响应式效果

</script>