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

问题描述

txt 复制代码
pinia中的数据更新了,页面还是旧数据

前端代码

html 复制代码
<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

typescript 复制代码
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;
        }
      });
    },
  },
});

实现方案

typescript 复制代码
...
   /**
     * 删除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 ,解决

相关推荐
DaMu9 分钟前
Cesium & Three.js 【移动端手游“户外大逃杀”】 还在“画页面的”前端开发小伙伴们,是时候该“在往前走一走”了!我们必须摆脱“画页面的”标签!
前端·gis
非专业程序员9 分钟前
一文读懂Font文件
前端
Asort11 分钟前
JavaScript 从零开始(七):函数编程入门——从定义到可重用代码的完整指南
前端·javascript
Johnny_FEer12 分钟前
什么是 React 中的远程组件?
前端·react.js
我是日安15 分钟前
从零到一打造 Vue3 响应式系统 Day 10 - 为何 Effect 会被指数级触发?
前端·vue.js
知了一笑15 分钟前
「AI」网站模版,效果如何?
前端·后端·产品
艾小码18 分钟前
用了这么久React,你真的搞懂useEffect了吗?
前端·javascript·react.js
知觉19 分钟前
实现@imput支持用户输入最多三位整数,最多一位小数的数值
前端
RoyLin19 分钟前
TypeScript设计模式:状态模式
前端·后端·typescript
RoyLin21 分钟前
TypeScript设计模式:观察者模式
前端·后端·typescript