Vue3——Pinia+Pinia持久化

合集 - Vue3(8)

1.Vue3——Vite + element-plus +Vue3 项目搭建、"@"别名设置2024-02-272.Vue3——环境变量的配置2024-03-013.Vue3——SVG 图标配置2024-03-044.Vue3——集成 sass2024-03-055.Vue3——集成mock 模拟数据生成器2024-03-126.Vue3——axios 安装和封装2024-03-137.Vue3——Vue Router2024-05-09

8.Vue3——Pinia+Pinia持久化2024-05-25

收起

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"],
  },
});