有些场景下可以避免发请求直接取缓存数据

纯纯菜鸡最近遇到了这样一个场景（如下图）

页面上的表格和弹窗中的表格其实会调同一个接口，由于页面上可操作这个表格，进行新增、编辑和删除等，而弹窗中的表格是全量数据（先不谈展示优化）

因此，为保证弹窗中的表格数据要与页面的保持一致，需要每弹出一次弹窗就要调一下全量数据的接口。

但是根据需求分析，有一些状态下，页面表格是不可操作状态的，也就意味着，弹窗数据不会发生变化，此时，就可以将请求返回的数据缓存起来，不必每次点击查看就发起请求了。

// use_cache.ts

import { computed, ref, watch, reactive } from 'vue'

import { getXXX } from './data_XXX'
import { showError } from '@/XXX'
import type { IXXX } from './interface'

// 页面数据缓存池
export const poolList: Record<number, IXXX[]> = {}

// 用于显示更多信息
export function useCache() {
  // 是否发请求
  const noCache = ref<boolean>(true)
  // 区分数据缓存池中不同数据的标识
  const cacheId = ref<number | undefined>()

  const cache = reactive<Array<ISpecFunc>>([])

  async function echo() {
    const id = cacheId.value
    if (id === undefined) { return }
    if (noCache.value && !(poolList[id])) {
      try {
        const ret = await getXXX({
          id,
          current: -1
        })
        poolList[id] = ret.list
        Object.assign(cache, ret.list)
      } catch (err) {
        showError(err)
      }
    }
  }

  return {
    noCache,
    cacheId,
    cache,
    echo
  }
}

// 弹窗
<script lang="ts" setup>

import { watch, computed } from 'vue'

import { useCache } from './use_cache'

const { noCache, cacheId, cache, echo } = useSpecCache()

const props = defineProps<{
  noCache: boolean
  specId: number | undefined
  visible: boolean
}>()
watch(
  () => props.visible,
  (val) => {
    if (val) {
      noCache.value = props.noCache
      cacheId.value = props.specId as number
      echo()
    }
  }
)
const isVisible = computed(() => props.visible)

const emit = defineEmits<{
  (event: 'close'): void,
}>()

const onclose = () => {
  emit('close')
}
</script>

<template>
  <el-dialog
    v-model="isVisible"
    width="860px"
    @close="onclose"
  >
      ...
  </el-dialog>
</template>

如果后台配合的话，还可以做的更多，比如后台返回一个数据id，记录这份数据的更新，每一次更新都会改变这个字段，这样就可以将这个字段与cacheId组合起来区分数据缓存池中的不同数据