Vue3+TS 任意vue组件中变更NaiveUI 全局组件语言

上一篇 《Vue3+TS i18n插件使用与配置》 文章，我们已经有了一个 i18n.global.locale.value 参数，它可以设置和获取当前语言，那么我们可以在NaiveUI 全局配置初始化的时候就赋值，这样就能达到切换页面中自定义文字语言时顺带切换UI组件语言，这也就是为什么执行setLanguage方法的时候会加重新加载页面代码了，如果有更好的实现方法可以在评论区回复，感谢！

在App.vue文件内设置 NaiveUI 全局配置参数，包括自定义主题样式，默认语言等信息。

<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup

import { NConfigProvider, GlobalThemeOverrides, zhCN,enUS,dateZhCN,dateEnUS } from 'naive-ui'

import { reactive } from 'vue'
import i18n from "./i18n";

const languageDict = reactive({
  "zh-CN": zhCN,
  "en-US": enUS,
})

const dateLanguageDict = reactive({
  "zh-CN": dateZhCN,
  "en-US": dateEnUS,
})
// @ts-ignore: 这是官方的错误，本身现在它就是一个ComputedRefImpl类型的参数
const locale = languageDict[i18n.global.locale.value as keyof typeof languageDict]
// @ts-ignore
const dateLanguage = dateLanguageDict[i18n.global.locale.value as keyof typeof dateLanguageDict];

const themeOverrides: GlobalThemeOverrides = {
// 这里是主题配置信息
}

</script>

<template>
  <n-config-provider :theme-overrides="themeOverrides" :locale="locale" :date-locale="dateLanguage">
    <router-view ></router-view>
  </n-config-provider>
</template>

<style lang="scss">
</style>