nvue页面内单文件组件的国际化

先上场景案例：

nvue 页面中的弹窗组件 up-popup, 初始状态不显示 ， 使用nvue国际化方案， 页面进入后， 不打开弹窗前就修语言， 回到该页面，打开弹窗， 则显示的是 修改前的语言

uni-i18n源代码原因：t 是惰性的

let t = (key, values) => {  
        if (typeof getApp !== 'function') {  
            // app view  
            /* eslint-disable no-func-assign */  
            t = function (key, values) {  
                return i18n.t(key, values);  
            };  
        }  
        else {  
            let isWatchedAppLocale = false;  
            t = function (key, values) {  
                const appVm = getApp().$vm;  

                if (appVm) {  
                    // 触发响应式  
                    appVm.$locale;  
                    if (!isWatchedAppLocale) {  
                        isWatchedAppLocale = true;  
                        watchAppLocale(appVm, i18n);  
                    }  
                }  
                return i18n.t(key, values);  
            };  
        }  
        return t(key, values);  
    };

我的解决方案：预热 t, 打破惰性

方案：

onMounted(() => {  
    t('appName');  
  });  

封装 hook

import { onMounted } from 'vue';  

/**  
 * @name useNvueI18nWarmup  
 * @description 一个旨在处理 nvue 页面中 i18n 响应式问题的组合式函数， 预热国际化 t,打破 t 的惰性。  
 */  
export function useNvueI18nWarmup(t: (key: string) => string) {  
  onMounted(() => {  
    t('appName');  
  });  
}

vue3组合式使用

import { useNvueI18nWarmup } from '@/common/useNvueI18nWarmup';  
import { initVueI18n } from '@dcloudio/uni-i18n'  

  // const messages = {} 此处内容省略，和 vue 全局引入的写法一致  

const { t } = initVueI18n(messages)  

useNvueI18nWarmup(t);