vue3实现切换语言包在Pinia的数组也跟着改变语言

在Vue3中，尤其是结合Vuex 4.x（现在称为Pinia）的状态管理库，要实现切换语言时动态更新语言相关的数据，你可以按照以下步骤操作：

1. **创建Pinia状态管理**:
- 首先，在`store.js`或其他适当的 Pinia store 中创建一个名为 `i18n` 的模块，用于存储当前的语言和翻译信息数组。

   import { createStore } from '@pinia/core';

   export const useI18nStore = createStore({
     id: 'i18n',
     state: () => ({
       language: 'en', // 默认语言
       translations: [], // 语言对应的字符串数组
     }),
     actions: {
       setLanguage(newLanguage) {
         this.$set(this.state, 'language', newLanguage);
         // 更新翻译数组，假设你有一个函数loadTranslations()
         this.loadTranslations(newLanguage);
       },
       loadTranslations(language) {
         // 根据实际语言加载翻译数据，这可能是从JSON文件、API获取等
         // 这里仅示例返回一个静态数组
         const langData = ...; // 根据实际实现填充
         this.translations = langData[language];
       },
     },
   });

2. **在组件中使用和监听状态**:
- 使用 `useI18nStore` 提供的store实例，并在需要的地方订阅语言更改事件。

   <script>
   import { defineComponent, ref } from 'vue';
   import { useI18nStore } from './store.js';

   export default defineComponent({
     setup() {
       const store = useI18nStore();
       const selectedLanguage = ref(store.language);

       // 当语言发生变化时，自动更新本地语言变量并刷新翻译数据
       selectedLanguage.value = store.language;
       selectedLanguage.watch((newLang) => {
         store.setLanguage(newLang); // 触发action更新语言和翻译数组
       });

       return {
         // 在模板中展示语言切换选项和使用翻译
         languages: ['en', 'fr', 'zh'], // 示例列表，替换为实际语言
         // 显示翻译文本，如：{ $t('greeting') }
         greeting: store.translations['greeting'],
       };
     },
   });
   </script>

3. **实现`loadTranslations`函数**:
- 这部分依赖于你的项目结构和如何获取翻译数据，可能涉及到网络请求或读取配置文件。这里提供一种简单的例子，假设你有预定义的JSON对象：

   function loadTranslations(language) {
     if (!translationsCache[language]) {
       const url = `/locales/${language}.json`;
       fetch(url)
         .then(response => response.json())
         .then(data => {
           translationsCache[language] = data.translations;
           store.translations = data.translations;
         })
         .catch(error => console.error('Failed to load translations:', error));
     }
     return store.translations;
   }

当你切换语言时，`selectedLanguage`会触发`setLanguage` action，进而更新`translations`状态。