element-plus e-tabs与pinia 一起使用的问题

问题描述

pinia中的数据更新了，页面还是旧数据

前端代码

<template>
  <Layout>
    <section class="_main_">
      <el-tabs editable closable v-model="activeTabName"  type="card">
        <template #add-icon>
          <el-button type="primary" @click="handleAddTab">新增</el-button>
          <el-button type="primary" @click="handleAddTab">绑定</el-button>
        </template>
        <template v-if="tabs.length">
          <el-tab-pane v-for="item in tabs" :key="item.id" :name="item.id">
            <template #label>
              <div class="tab-label">
                <span>{{ item.title }}</span>
                <el-icon @click="removeTab(item.id)"><Close /></el-icon>
              </div>
            </template>
            <component :is="TabContent" v-bind="item" />
          </el-tab-pane>
        </template>
        <el-tab-pane name="default" v-else>
          <template #label>
            <div class="tab-label">
              <span>item</span>
            </div>
          </template>
          <TabContent />
        </el-tab-pane>
      </el-tabs>
    </section>
  </Layout>
</template>

<script lang="ts" setup>
import Layout from "@/layout/index.vue";
import { useTabsStore } from "@/store";
import TabContent from "./components/tabContent/index.vue";
const store = useTabsStore();
const { addTab, removeTab } = store;
const { tabs, activeTabName } = storeToRefs(store);

watchEffect(() => {
  console.log(`activeTabName ==>`, activeTabName.value);
});
const handleAddTab = () => {
  const index = tabs.value.length + 1;
  addTab({ title: `${index}` });
};

</script>

pinia

import { defineStore } from "pinia";
import { v4 as uuid } from "uuid";
type IState = {
  activeTabName: string;
  tabs: {
    title: string;
    id: string;
  }[];
};

const defaultActiveTabName = "default";

const state = reactive<IState>({
  activeTabName: defaultActiveTabName,
  tabs: [],
});

export const useTabsStore = defineStore("tabs", {
  state: () => state,
  actions: {
    /**
     * 新增tab标签页
     */
    addTab(tab: Partial<IState["tabs"][number]>) {
      const id = uuid();
      this.tabs.push({ title: tab.title!, id });
      this.activeTabName = id;
    },
    /**
     * 删除tab标签页
     */
    removeTab(id: string) {
      const index = this.tabs.findIndex((i) => i.id == id);
      this.tabs.splice(index, 1);

      requestAnimationFrame(() => {
        // 更新逻辑
        if (!this.tabs.length) {
          this.activeTabName = defaultActiveTabName;
          return;
        }

        // 判断是否有 activeTabName 绑定的值
        const hasActiveTabName =
          this.tabs.findIndex((i) => i.id == this.activeTabName) >= 0;
        if (!hasActiveTabName) {
          this.activeTabName = this.tabs[this.tabs.length - 1].id;
        }
      });
    },
  },
});

实现方案

...
   /**
     * 删除tab标签页
     */
    removeTab(id: string) {
      const index = this.tabs.findIndex((i) => i.id == id);
      this.tabs.splice(index, 1);

      requestAnimationFrame(() => {
        // 更新逻辑
        if (!this.tabs.length) {
          this.activeTabName = defaultActiveTabName;
          return;
        }

        // 判断是否有 activeTabName 绑定的值
        const hasActiveTabName =
          this.tabs.findIndex((i) => i.id == this.activeTabName) >= 0;
        if (!hasActiveTabName) {
          this.activeTabName = this.tabs[this.tabs.length - 1].id;
        }
      });
    },

使用 requestAnimationFrame可以解决（setTimeout也行，只是有瞬间白屏）

ok ，解决