In the Vite project, we used Volar to replace Vetur, Pinia to replace Vuex, and introduced their installation and configuration. We also used The Script setup syntax of Pinia and Vue3.2 to practice breadcrumbs

preface

The university’s latest recommendations are as follows:

Before proceeding with the project, there are some upgrades and preparations:

  1. NPM dependency package version upgrade
  2. VeturIs a VSCode plug-in, commonly used in the vue2. x project, but not very friendly to TS support; So Vue3. X development recommends another plug-inVolar. Note:Volar and Vetur are mutually exclusive. Disable Vetur when using Volar
  3. Pinia: Similar to Vuex, the proposal to test the next iteration of Vuex is very similar to Vuex 5’s open RFC API.

Pinia installation and configuration

  1. The installation
yarn add pinia
# or with npm
npm install pinia
Copy the code
  1. In the main. Ts configuration
import { createPinia } from "pinia";
app.use(createPinia());
Copy the code
  1. Define stores: Use the stores/example.ts file as an example to realize the basic use
import { defineStore } from "pinia";

export const useExampleStore = defineStore("example", {
  The state / / statement
  state: () = > ({
    name: "Zhang".count: 18,})./ / declare the getter
  getters: {
    doubleCount(state) {
      return state.count * 2;
    },
    doubleCountPlus() {
      // Pass the parameter as a function
      return (value: number) = > {
        // Call the getter directly through this
        return this.doubleCount + value; }; }},/ / declare the actions
  actions: {
    // Synchronize tasks
    addCount() {
      this.count++;
    },
    // Asynchronous tasks
    asyncAddCount(num: number) {
      setTimeout(() = > {
        this.count += num;
      }, 3000); ,}}});Copy the code

Complete the breadcrumb component

Improved breadcrumbs in the header area using Pinia and Script Setup

Implementation Idea

  1. When the left menu is selected, the breadcrumbList is saved globally.
  2. According to the saving path, the corresponding routing information (breadcrumbMenu) is screened out in the left menu table.
  3. According to the corresponding routing information, display the bread crumbs, which should pay attention to the home page processing

Position adjustment

Adjust the position of the breadcrumb component from the content area Layout /main to the header area Layout /header

  1. Edit layout/main/index.vue to remove the breadcrumb component
<template>
  <a-layout-content class="c-main">
    <div class="c-main-content">
      <router-view v-slot="{ Component }">
        <keep-alive>
          <component :is="Component" />
        </keep-alive>
      </router-view>
    </div>
  </a-layout-content>
</template>

<script lang="ts"></script>

<style lang="scss" scoped>
.c-main {
  margin: 20px; & -content {
    padding: 24px;
    background: #fff;
    min-height: 360px; }}</style>
Copy the code
  1. Edit layout/header/index.vue and add breadcrumb component
<template>
  <a-layout-header>
    <Breadcrumb />
  </a-layout-header>
</template>

<script lang="ts">
  import Breadcrumb from ".. /header/breadcrumb.vue";
  export default defineComponent({
    components: {
      Breadcrumb,
    },
  });
</script>
Copy the code

The data processing

  1. Defines interfaces such as menus and routes
// src/interface/route.ts
import { defineComponent } from "vue";

type Component<T extends any = any> =
  | ReturnType<typeof defineComponent>
  | (() = > Promise<typeof import("*.vue") >) | (() = > Promise<T>);

export interface RouteMeta {
  title: string; / / title
  hidden: boolean; // Whether to hide
  icon: string; / / iconisKeepAlive? : boolean;// Whether to enable keep-aliveorderId? : string | number;/ / serial number
}

exportinterface RouteRecord { id? : string; name? : string; meta? : RouteMeta; children? : RouteRecord[]; orderId? : number; path? : string; component? : Component | string; redirect? : string; }// src/interface/menu.ts
import { RouteRecord } from "./route";
export interface MenuRecord extends RouteRecord {}
Copy the code
  1. newstores/breadcrumb.tsFile, and treat the bread crumbs
import { defineStore } from "pinia";
import { MenuRecord } from "interface/menu";

export interface BreadcrumbRecord {
  name: string;
  title: string;
}

const initBreadcrumbList = [{ name: "dashboard".title: "Home page" }];
const initBreadcrumb = initBreadcrumbList.map((o) = > o.name);

export const useBreadcrumbStore = defineStore("breadcrumb", {
  state: () = > ({
    breadcrumbList: initBreadcrumb,
  }),
  getters: {
    getBreadcrumb(state) {
      return state.breadcrumbList;
    },
    filterBreadcrumb() {
      return (
        menus: MenuRecord[] = [],
        result: BreadcrumbRecord[] = []
      ): BreadcrumbRecord[] => {
        const path = this.getBreadcrumb;
        if (menus && menus.length && path && path.length) {
          let node = path.shift();
          let item = menus.find((o) = > o.name === node);
          result.push({ name: item.name, title: item.meta.title });
          if(item? .children) {return this.filterBreadcrumb(item.children, result); }}returnresult && result.length ? result : initBreadcrumbList; }; }},actions: {
    setBreadcrumb(data: string[]) {
      this.breadcrumbList = data; ,}}});Copy the code

Save the data

Save the selected menu path in Layout /sider/menu.vue

<template>
  <a-menu @click="handleMenuClick"></a-menu>
</template>

<script lang="ts">
  import { useBreadcrumbStore } from "stores/breadcrumb";
  export default defineComponent({
    setup() {
      const handleMenuClick = ({ key = "", keyPath = [] }) = > {
        // Save the selected pathsetBreadcrumb(keyPath); }; }});</script>
Copy the code

functional

Mainly in the layout/headers/breadcrumb. Vue process, update the vue version before, can now use the setup to write the specific use can view the website – the SFC

<template>
  <a-breadcrumb class="c-breadcrumb">
    <a-breadcrumb-item v-for="item in breadcrumbMenu" :key="item.name">
      <router-link :to="{ name: item.name }">
        {{ item.title }}
      </router-link>
    </a-breadcrumb-item>
  </a-breadcrumb>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { useStore } from "store/index";
import { useBreadcrumbStore } from "stores/breadcrumb";

const { filterBreadcrumb } = useBreadcrumbStore();

const store = useStore();
const menus = computed(() = > store.state.routes.menus);
const breadcrumbMenu = computed(() = > {
  let result = filterBreadcrumb(menus.value);
  return result;
});
</script>

<style lang="scss" scoped>
.c-breadcrumb {
}
</style>
Copy the code

Results show