面试题：Svelte组件国际化之高级难度：动态切换语言实现

Question

在已经使用i18next实现基本国际化的Svelte项目里，要求实现一个功能：用户点击按钮可以动态切换语言（比如从中文切换到英文）。请阐述实现该功能的关键步骤，包括如何管理语言状态以及如何更新组件的语言显示。

Answer 1

1. 管理语言状态：
   • 在Svelte组件中，使用$:声明一个响应式变量来存储当前语言状态，例如：

   let currentLanguage = 'zh'; // 初始语言设为中文
   

   • 可以将这个变量存储在一个全局状态管理工具（如$lib/store.js）中，方便在不同组件间共享，例如使用writable来创建可写存储：

   import { writable } from'svelte/store';
   
   export const languageStore = writable('zh');
   

2. 更新组件的语言显示：
   • 引入i18next的useTranslation函数（如果使用的是Svelte插件形式），在组件中导入并使用：

   import { useTranslation } from'svelte - i18next';
   
   const { t, i18n } = useTranslation();
   

   • 在按钮的点击事件中，通过i18n.changeLanguage方法来切换语言，同时更新语言状态变量：

   <button on:click={() => {
       if (currentLanguage === 'zh') {
           currentLanguage = 'en';
           i18n.changeLanguage('en');
       } else {
           currentLanguage = 'zh';
           i18n.changeLanguage('zh');
       }
   }}>切换语言</button>
   

   • 在需要显示国际化文本的地方，使用{t('key')}来显示对应的翻译文本，key是在i18next配置的翻译文件中的键，例如：

   <p>{t('welcome_message')}</p>
   

   • 由于currentLanguage是响应式变量，组件会在语言状态改变时自动重新渲染，确保显示正确的语言文本。如果使用全局状态管理的languageStore，在组件中可以订阅该存储来更新currentLanguage，例如：

   import { languageStore } from '$lib/store.js';
   
   $: languageStore.subscribe((value) => {
       currentLanguage = value;
   });