[优化]用异步立即执行函数解决异步读取indexedDb接口语言刷新闪烁问题

原本的i18n设置语言默认是中文,

然后组件挂载的时候去读取本地的语言

onMounted(() => {
  init()
})
const init = async () => {
  let res = await getLanguageApi()
  console.log(res.result.name);
  if (res.result && res.result.name == 'en') {
    lang.value = en
    // locale.value = 'en'
  } else if (res.result && res.result.name == 'zh') {
    lang.value = zhCn
    // locale.value = 'zh'
  }
}

这样虽然可以解决,但因为默认是中文,然后挂载的时候再去读取语言,这样会导致一个问题,就是刷新的时候显示默认中文,然后再去本地读取语言再替换,也就是说我切换为英文,刷新网页,他会显示显示中文再显示英文,所以能不能在创建i18n的时候直接读取呢?

但是又有问题,因为接口是异步执行的,所以报错,那能不能用同步的方式读取异步接口,得到数据再挂载上去呢?当然可以,async await就是

首先写一个异步函数

这样的话先从本地读取到语言再设置到locale属性,然后返回出去

export async function getLanguage() {
  let res = await getLanguageApi()
  return createI18n({
    // locale: 'zh', // set locale
    locale: res.result.name,
    fallbackLocale: 'en', // set fallback locale
    messages: {
      zh, en
    }
  })
}

接下来就是main.js了,解构出刚刚导出的创建i18n的函数然后搭配async await用同步的方式进行异步执行得到实例,然后挂载到app上面,

import { getLanguage } from '@/i18n/index.js'
 (async () => {
  let i18n = await getLanguage()
  const app = createApp(App)
  app.config.globalProperties.$message = ElMessage
  app.use(ElementPlus).use(router).use(i18n).mount('#app')
})()

这样的解决了刷新闪烁问题