（求助）将业务模块封装成个class到模板中直接使用的功能需求

[1451544363]

`
// 封装的ts文件
export class LangUtils {

public list = ref([])

public loading = ref(true)

constructor() {
    // request
    getLanguageList().then((res: any) => {
        this.list.value = res.data;
        this.loading.value = false;
    })
}

/**
 * 翻译
 */
public translate = (key: string) => {
    return computed(() => {
        let list = this.list.value
        return list.find((item: any) => item.key == key)?.name || '未知'
    })
}

}

// 模板中

const language = new LangUtils() // 这种会无效

const language = toReactive(new LangUtils()) // 必须这样才行，在class中不是声明了ref类型嘛,为什么要多加个toReactive呢

`

[1451544363]

模板中使用方法

          <el-select v-model="editData.form.lang" placeholder="请选择语言">
            <el-option v-for="lan in language.list" :key="lan.key" :label="lan.name" :value="lan.key"></el-option>
          </el-select>

[l246804]

模板中使用方法

          <el-select v-model="editData.form.lang" placeholder="请选择语言">
            <el-option v-for="lan in language.list" :key="lan.key" :label="lan.name" :value="lan.key"></el-option>
          </el-select>

普通对象内部嵌套 ref 对象需要在模板里自己解构。

- <el-option v-for="lan in language.list"
+ <el-option v-for="lan in language.list.value"

[dingpengxin]

const language = new LangUtils() // 这个是普通对象，没有被vue进行响应式代理（所以template中不会响应式更新）
const language = toReactive(new LangUtils()) // 这个有效是因为你转成响应式了

[1451544363]

麻烦再请教下，那class中声明的ref是不是多余的啊