k_online_ui/src/App.vue

<script setup lang="ts">
import { RouterView } from 'vue-router'
import { useLangStore } from '@/stores/modules/lang'
import { useI18n } from 'vue-i18n'
import { useRoute } from 'vue-router'
import VideoView from '@/views/Video/src/VideoView.vue'

const route = useRoute()

const langStore = useLangStore()

/* getCurrentInstance()可以用来获取当前组件实例 */
let current = getCurrentInstance()?.appContext.config.globalProperties as any

const langValue = ref()
const { locale } = useI18n() // 解构出 locale

langValue.value = localStorage.getItem('lang') || 'English'
const languageChangetest = (label: string) => {
  if (label === 'Chinese') {
    // current.$i18n.locale = 'zh_TW'
    locale.value = 'zh_TW' // 修改 locale 的值
    langStore.setLang('Chinese')
  } else {
    // current.$i18n.locale = 'en_US'
    locale.value = 'en_US'
    langStore.setLang('English')
  }
}

languageChangetest(langValue.value)

const langData = ref({})
onMounted(async () => {
  try {
    const response = await fetch('./locales/en.json')
    console.log('Fetch response:', response)
    langData.value = await response.json()
    console.log('Fetch response:', langData.value)
  } catch (error) {
    console.error('Error fetching the JSON file:', error)
  }
})
</script>

<template>
  <el-config-provider :locale="langStore.ElementLocale">
    <VideoView v-if="route.name === 'Demo Video'" />
    <RouterView v-else />
  </el-config-provider>
</template>