0-1搭建vue3.0+vite+ts+less脚手架3——封装router、pinia

封装 router、pinia

• 在 views 文件下添加两个页面 about、login,在 router 文件下新增文件 modules
• 在 store 文件下添加 user 文件,在 user 文件下新增文件 index.ts、type.ts

    |- src/        # 项目资源
        |- assets/    # 经过打包的静态资源
        |- components/    # 通用组件
        |- styles/    # 项目通用样式
        |- http/    #  axios封装函数
            |- requtest.ts/ # axios封装
        |- router/    #  路由
            |- modules/    #  路由模块
                |- home.ts  # home页面路由
                |- about.ts  # 关于页面路由
                |- login.ts  # 登录页面路由
        |- store/    #配置pinia
            |- user/    #  用户信息
                |- index.ts  # 用户信息
                |- type.ts  # 用户信息类型
        |- views/    # 页面组件
            |- home/  # home页面组件
                |- index.vue
            |- about/  # 关于页面组件
                |- index.vue
            |- login/  # 登录页面组件
                |- index.vue
        |- App.vue  # 项目的主组件
        |- main.ts    # 入口ts文件

vue-router

** /src/view/home/index.vue**

 <template>
  <div class="home">
    <h1>Home</h1>
    <p>Home page content goes here</p>
  </div>
</template> 
<style lang="less" scoped>

</style>

** /src/view/about/index.vue**

 <template>
  <div class="about">
    <h1>about</h1>
    <p>about page content goes here</p>
  </div>
</template> 
<style lang="less" scoped>

</style>

** /src/router/modules/home.ts**

export default{
    path: '/',
    name: 'home',
    component: () => import(/* webpackChunkName: "home" */ '@/views/home/index.vue'),
    meta: {},
    children:[]
}

** /src/router/modules/login.ts**

export default{
    path: '/',
    name: 'login',
    component: () => import(/* webpackChunkName: "login" */ '@/views/login/index.vue'),
    meta: {},
    children:[]
}

• home.ts、about.ts、login.ts，在 index.ts 中引入

** /src/router/index.ts**

import { RouteRecordRaw, createRouter, createWebHashHistory } from "vue-router";
import NProgress from "nprogress";
import "nprogress/nprogress.css";
// 配置路由
const routes: Array<RouteRecordRaw> = [];
const aboutRouter = {
  path: "/about",
  name: "about",
  component: () =>
    import(/* webpackChunkName: "about" */ "@/views/about/index.vue"),
  meta: {},
  children: [],
};
const modules: Record<string, any> = import.meta.glob(["./modules/*.ts"], {
  eager: true,
});

Object.keys(modules).forEach((key) => {
  const module = modules[key].default;
  routes.push(module);
});
routes.push(aboutRouter);

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});
router.beforeEach(async (_to, _from, next) => {
  NProgress.start();
  next();
});
router.afterEach((_to) => {
  NProgress.done();
});
export default router;

封装 pinia

** /src/store/user/type.ts**

export interface IUserState {
  username: string;
  accessToken: string;
  refreshToken: string;
  roles: string[]; // Array<string>
}

** /src/store/user/index.ts**

import { defineStore } from "pinia";
import pinia from "@/store";
import { userLogin, refreshUserInfo } from "@/api/user";

export interface UserState {
  username: string;
  accessToken: string;
  refreshToken?: string;
  roles: Array<string>;
}
export type LoginRequest = {
  username: string;
  password: string;
};
export const useUserStoreHook = defineStore("userInfo", {
  state: (): UserState => ({
    username: "txj",
    accessToken: "",
    roles: ["common"],
  }),
  getters: {},
  actions: {
    storeUserLogin(data: LoginRequest) {
      return userLogin(data).then((res) => {
        this.username = res.username;
        this.roles = res.roles;
        this.accessToken = res.accessToken;
        return res;
      });
    },
    stroeRefreshUserInfo() {
      if (this.username == "txj" && this.accessToken != "") {
        refreshUserInfo({
          accessToken: this.accessToken,
        })
          .then((res) => {
            this.username = res.username;
            this.roles = res.roles;
            this.accessToken = res.accessToken;
          })
          .catch(() => {
            this.accessToken = "";
          });
      }
    },
  },
  persist: {
    key: "userInfo",
    storage: sessionStorage,
    paths: ["accessToken"],
  },
});
export function useUserStore() {
  return useUserStoreHook(pinia);
}

** /src/view/login/index.vue**

<template>
  <div>login</div>
</template>
<script lang="ts" setup>
import { useUserStore } from '@/store/user';
const userStore = useUserStore();
console.log(userStore);
</script>
<style lang="less" scoped></style>