vue2 首页全局刷新tab切换，如何设置使得接口全部调取完毕再允许点击其他tab

在Vue 2中，如果你想要实现首页全局刷新Tab切换，并且等待所有接口调取完毕后再允许切换到其他Tab，你可以采用以下步骤：

1. **状态管理**：
使用Vuex来管理全局的状态，比如一个`loading`标志或者一个数组来存储每个Tab的请求状态。

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

const state = {
  tabs: [],
  isLoading: false,
}

const mutations = {
  setLoading(state) {
    state.isLoading = true
  },
  setLoaded(state, tabIndex) {
    state.tabs[tabIndex].isLoading = false
  },
  handleRequestSuccess(state, tabIndex) {
    state.tabs[tabIndex].success = true
  },
  // 更多处理成功、失败等状态的mutation...
}

export default new Vuex.Store({
  state,
  mutations,
  // 视图层触发的动作（actions）
  actions: {
    async fetchData(tabIndex) {
      await yourApiCall().then(() => {
        commit('handleRequestSuccess', tabIndex)
      })
      commit('setLoading', false)
    }
  },
})

2. **组件内监听**：
在每个Tab组件里，你需要监听这个状态变化并控制Tab的交互。当`isLoading`为真时，禁止切换；当所有数据加载完成时，移除限制。

<!-- Tab.vue -->
<template>
  <div :class="{ disabled: isLoading }">
    <!-- Tab内容 -->
  </div>
</template>

<script>
export default {
  computed: {
    isLoading() {
      return this.$store.state.isLoading || !this.$store.state.tabs.some(tab => !tab.isLoading);
    },
  },
  methods: {
    onTabClick() {
      if (!this.isLoading) {
        this.$store.dispatch('fetchData', this.tabIndex);
      }
    },
  },
}
</script>

3. **路由配置**：
如果你在Vue Router中管理路由，可以在`beforeEach`钩子函数中检查是否所有Tab都加载完毕才能进入下一个路由。

// router.js
import { mapGetters } from 'vuex'

export default new VueRouter({
  // ...
  beforeEach(to, from, next) {
    const isLoading = getLoadingStatus(); // 获取当前是否有任意Tab在加载中
    if (isLoading) {
      next(false); // 等待所有数据加载完再继续导航
    } else {
      next();
    }
  },
});

// 获取某个tab的isLoading状态
function getLoadingStatus() {
  return this.$store.getters['tabs.isLoading'];
}