求一种数据引入的解决方案（vue3）？

Question

要求是这样的：在公共的 TS 文件中定义一个接口获取列表数据的方法，并且封装一个函数返回上个方法中返回的列表数据并导出， 在组件中通过 import 直接引入这个数据来展示，同时在不同组件中引入这个数据的请求都要重新发起。类似下面

const getList = ()=>{return axios.get('xxx').then(res=>res.data.list)}
const useList =(getOptions)=>{return getOptions()}
export list = useList(getList)

// 在组件中
import list from './x.ts'

实际的 useList 实现如下

但是我有下面一些问题：

1. 我在 useList 中使用 computed 来返回数据，但是有缓存，在不同组件中引入的时候会有缓存。
2. 如果我使用图中注释的代码，在切换路由时又会把所有的 getOptions 都执行了一次（而不是当前组件所对应的方法）

可能我陷入了误区，这个是我接手的代码，就一直想在这个基础上改动，有其他解决方法的也十分感谢

Answer 1

这样应该就可以，你试试吧

export async function creatOptionsManger(optionOrigin){
    // 不用改接口，这里只是欺骗浏览器，跳过缓存
    if (!optionOrigin.value){
        optionOrigin.value = await http.get("/api/v1/customer/unit-nature/?time=" + new Date().getTime())
    }
    return optionOrigin.value
}

Answer 2

你只说明了现象，没说明你想要什么效果啊

Answer 3

是这个的意思嘛？封装一个接口文件？