如何在vue3，typescript中管理全局变量和函数

Question

我刚进入vue，一切都很混乱。我是来征求意见的。

有一些数据应该用于全局，我还想提供处理这些数据的各种功能。起初，它是用全局变量声明来处理的。但由于函数的原因，我创建了一个将数据和函数结合在一起的类，并将它们声明为静态的。数据已在类的构造函数中初始化。(使用Axios get(此外，在App.vue的setup((中声明了该对象，以便像singletone一样使用。

<Common.ts>

export class DataManager {
static datas: DataInfo[];
constructor() {
axios.get("api").then((res) => {
for(const eachData of res.data) {
DataManager.datas.push({
id: eachData.id,
name: eachData.name,
})
}
).catch(error -> {
console.log(error)
}
}
static getDataName(id: number) : string {
const foundInfo = DataManager.datas.find((element : DataInfo) => {
return element.id === id;
})
if(foundInfo === undefined) {
return ""
}
return foundInfo.name;
}
}

<App.vue>

setup() {
const SingletonDataManager = new DataManager();
return {
SingletonDataManager
}
}

这是最好的方法吗？或者对于全局变量和函数有更好的方法吗？如果singleton是一种正确的方式，我认为在没有静态的情况下，通过provide/Inject共享singleton对象更好。。。正确的请给我一些建议。

使用可组合的更新

const datas = ref([] as DataInfo[])
axios.get("api").then((res) => {
for(const eachData of res.data) {
Object.assign(datas.value, eachData)
}
).catch(error -> {
console.log(error)
}
export function useDataManager() {
const getDataName = (id: number) => {
return blahblah
}
return {
datas,
getDataName,
}
}

Answer 1

我认为这是可组合的完美候选者

以下是一个基本示例：

<script setup>
// DataName.vue
import { UseDataManager } from './DataManager'
const dataManager = UseDataManager()
</script>
<template>{{ dataManager.getDataName() }}</template>

// DataManager.ts
const dataManager = new DataManager();
export function UseDataManager(){
return dataManager;
}