Vue3 + TS + Antd + Pinia 从零搭建后台系统(三) Pinia + 全局loading + 公共方法

小胖伦的夕阳粉

已于 2024-06-07 17:07:09 修改

阅读量473

点赞数 8

文章标签： javascript vue.js 前端 typescript

于 2024-06-07 17:04:33 首次发布

本文链接：https://blog.csdn.net/zuo0407/article/details/139530844

版权

书接上回

本篇主要介绍： Pinia + 全局loading + 公共方法

继续填充

Pinia

想了解Pinia的可看该博主的文章，挺详细的。此篇不做讲解，只讲实际应用
链接: Pinia基础知识

index.ts

import type {
    App } from "vue";
import {
    createPinia } from "pinia";
import piniaPluginPersistedstate from "pinia-plugin-persistedstate";

const store = createPinia() as any;

// 创建Store时，将persistent选项设置为true,则整个Store将使用默认持久化配置保存
store.use(piniaPluginPersistedstate);

export const setupStore = (app: App<Element>) => {
   
  app.use(store);
};

export {
    store };

user.ts 填前文中的坑，补充全局方法：token及login的全局变量及方法

import {
    defineStore } from "pinia";
import {
    store } from "./index";
import {
    UserLoginType, UserType } from "../api/login/types";
import type {
    RouteRecordRaw } from "vue-router";
import {
    Modal } from "ant-design-vue";
import {
    loginOutLocalApi } from "@/api/login";
import router from "@/router";

interface UserState {
   
  userInfo?: UserType;
  tokenKey: string;
  token: string;
  roleRouters?: string[] | AppCustomRouteRecordRaw[];
  rememberMe: boolean;
  loginInfo?: UserLoginType;
}

interface RouteMetaCustom extends Record<string | number | symbol, unknown> {
   
  hidden?: boolean;
  alwaysShow?: boolean;
  title?: string;
  icon?: string;
  noCache?: boolean;
  breadcrumb?: boolean;
  affix?: boolean;
  activeMenu?: string;
  noTagsView?: boolean;
  canTo?: boolean;
  permission?: string[];
}
interface AppCustomRouteRecordRaw extends Omit<RouteRecordRaw, "meta" | "component" | "children"> {
   
  name: string;
  meta: RouteMetaCustom;
  component: string;
  path: string;
  redirect: string;
  children?: AppCustomRouteRecordRaw[];
}
export const useUserStore = defineStore("user",