Vue3——Pinia+Pinia持久化

Pinia

安装 Pinia

npm install pinia

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

// store/index.ts
// 仓库大仓库
import { createPinia } from "pinia";
// 创建大仓库
const pinia = createPinia();
// 对外暴露：入口文件需要安装仓库
export default pinia;

// main.ts
// 引入仓库
import pinia from "@/store";

// 安装仓库
app.use(pinia);

定义 Store

import { defineStore } from 'pinia'

// 你可以对 `defineStore()` 的返回值进行任意命名，但最好使用 store 的名字，同时以 `use` 开头且以 `Store` 结尾。(比如 `useUserStore`，`useCartStore`，`useProductStore`)
// 第一个参数是你的应用中 Store 的唯一 ID。
export const useAlertsStore = defineStore('alerts', {
  // 其他配置...
})

Pinia 持久化

pinia-plugin-persistedstate

npm install pinia-plugin-persistedstate

// store/index.ts
// 仓库大仓库
import { createPinia } from "pinia";
import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
// 创建大仓库
const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);
// 对外暴露：入口文件需要安装仓库
export default pinia;

持久化存储插件其他配置

const useUserStore = defineStore("User", {
  // 小仓库存储数据地方
  state: (): UserState => {
    return {
      token: "", // 用户唯一标识token
    };
  },
  // 持久化存储插件其他配置
  persist: {
    // 修改存储中使用的键名称，默认为当前 Store的 id
    key: "USER_KEY",
    // 修改为 sessionStorage，默认为 localStorage
    storage: window.sessionStorage,
    // 部分持久化状态的点符号路径数组，[]意味着没有状态被持久化(默认为undefined，持久化整个状态)
    paths: ["token"],
  },
});