来自 api 调用的 VueI18n 动态标签

如何解决来自 api 调用的 VueI18n 动态标签

我想从 api 中检索标签，它们有 2 种语言，并在用户单击更改语言时切换它们。现在默认加载一种语言，但它不是响应式的。如何让它对用户更改语言做出反应？我正在考虑以某种方式在其他一切之前调用该函数并将标签存储在 localStorage

代码：（lang.js 文件）

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import { HTTP } from './../config/http-request.js'

Vue.use(VueI18n)

const locale = 'da'
var langName;

const i18n = new VueI18n({
  locale,// language identifier
  messages: {}
})
 
function getLang(lang){
    console.log(lang) 
    if(lang == "da"){
        langName = "Danish"
    }else{
        langName = "English"
    }
    HTTP.get("1.0/language/label?language_name="+ langName + "&compact=True")
    .then((response) => {
        var msg = response.data.compact
        i18n.setLocaleMessage(lang,msg)
        i18n.locale = lang
        return lang
    })
    .catch(function(error) {
        console.log(error)
    })
}


 // This method is called when the manual switch languages,to be loaded when the page is initialized with a default language
// Vue.prototype.$loadLanguageAsync = loadLanguageAsync

getLang(locale)


export default i18n