vue3中使用pinia

一、配置antd和pinia

①安装

pinia：npm install pinia

②在main.js中引入

import { createApp } from 'vue'
import App from './App.vue'
import router from '@/router'
import { createPinia } from 'pinia'
import 'ant-design-vue/lib/message/style/index.css'//使用自动引用，需要单独引入message的样式


const app = createApp(App)
app.use(router)
app.use(createPinia())

app.mount('#app')

二、定义存储空间

在store文件夹下新建文件tabListStore.ts来存储tab状态

import { defineStore } from "pinia";
import { TabList, Tab } from "@/interface/tabsProps";
import router from "@/router";

export const useTabListStore = defineStore("tabList", {
  state: (): TabList => ({
    list: [
      { name: "1表", id: "1", isActive: false },
      { name: "2表", id: "12", isActive: false },
      { name: "3表", id: "13", isActive: false },
      { name: "4表", id: "14", isActive: false },
      { name: "5表", id: "15", isActive: false },
      { name: "6表", id: "16", isActive: false },
      { name: "7表", id: "17", isActive: false },
    ],
  }),
  actions: {
    async addTab(tab: Tab) {
      let checkId = await this.tabIsExies(tab.id);
      if (checkId.isExies) {
        await this.selectTab(tab);
      } else {
        this.list.forEach((item) => {
          item.isActive = false;
        });
        tab.isActive = true;
        await this.goToRouter(tab.id);
        this.list.push(tab);
      }
    },
    async closeTab(tab: Tab) {
      let checkId = await this.tabIsExies(tab.id);
      if (checkId.isExies) {
        let index = checkId.index;
        this.list.splice(index, 1);
        let noActive = this.list.every((item) => !item.isActive);
        if (tab.isActive || noActive) {
          if (index === 0) {
            //关闭第一个
            if (this.list.length === 0) {
              index = -1;
            }
          } else {
            index--;
          }
          if (index != -1) {
            this.list.forEach((item, _index) => {
              if (_index === index) {
                item.isActive = true;
                this.goToRouter(item.id)
              } else {
                item.isActive = false;
              }
            });
          }
        }
      }
    },
    async selectTab(tab: Tab) {
      if (tab.isActive) {
        return;
      }
      this.list.forEach(async (item) => {
        if (item.id === tab.id) {
          item.isActive = true;
          await this.goToRouter(tab.id);
        } else {
          item.isActive = false;
        }
      });
    },
    async tabIsExies(id: string) {
      let index = this.list.findIndex((item) => item.id === id);
      return { isExies: index !== -1, index };
    },
    async goToRouter(id: string) {
      if (id == "1") {
        router.push({ path: "/ComContent" });
      } else {
        router.push({ path: "/DataUpload" });
      }
    },
  },
});

三、使用【引入useTabListStore 调用其中定义的变量和方法】

<script lang="ts" setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { useTabListStore } from "@/store/tabListStore";

const router = useRouter();
const tabListStore = useTabListStore();
const selectedKey = ref(1);

//选择菜单栏事件
//1.切换路由
//2.关联tab，菜单相关数据存储在pinia里
const menuSelect = (indexNum: number) => {
  selectedKey.value = indexNum;
  tabListStore.addTab({
    id: indexNum.toString(),
    name: "name",
    isActive: false,
  });
 
};
</script>