Nuxt i18n 在语言切换时重置数据对象

Posted 2023-02-22

【中文标题】Nuxt i18n 在语言切换时重置数据对象

【英文标题】：Nuxt i18n resets data object on language switch

【发布时间】：2020-06-20 21:51:46

【问题描述】：

我一直在将nuxt-i18n 集成到我的一个项目中以启用多种语言。一切正常，但是当我在填写表单时切换语言时，页面中的所有数据都会丢失。

所以，我创建了一个表单并使用v-model 将数据绑定到页面的数据对象。

<div class="form-group">
   <label for="username"> $t('form.username') </label>
   <input v-model="user.username" type="username" class="form-control" id="username" />
</div>

这是页面的数据对象

data: () => 
  return 
     user: 
       username: ''
    

因此，当我在字段中输入用户名时，模型会按照我的预期进行更新。但是，一旦我从该页面切换语言，一旦设置了所选语言，数据就会丢失。

这就是我在单击例如荷兰国旗图标时切换语言的方式。

switchLocalePath(locale.code) // local.code is 'nl' in this case

当用户切换语言时，slug 也应该更新。下面的代码显示了我的nuxt.config.js 文件中i18n 包的设置。

modules: [
    ['nuxt-i18n', 
      locales: [
        
          code: 'en',
          iso: 'en-US',
          name: 'English'
        ,
        
          code: 'nl',
          iso: 'nl-NL',
          name: 'Nederlands'
        
      ],
      defaultLocale: 'nl',
      parsePages: false,
      pages: 
        'account/register': 
            en: '/account/register',
            nl: '/account/registreren'
        ,
        'account/index': 
            en: '/account/login',
            nl: '/account/inloggen'
        
      ,
      vueI18n: 
        fallbackLocale: 'nl',
        messages:  nl, en 
      
    ],
]

实际问题

所以几乎一切都按我的预期工作。但是每次我更改语言时，页面的数据对象都会被清除（看起来页面实际上并没有重新加载）。因此，当填写表单，然后在提交前更改语言时，所有数据都会丢失。

如果可能，我如何确保在切换语言时所有数据都保持不变？

提前致谢！

【参考方案1】：

我使用这种方法来更改语言环境并发生相同的行为。

<v-list>
    <v-list-item
        v-for="locale in availableLocales"
        :key="locale.code"
        @click="$router.push(switchLocalePath(locale.code))"
    >
        <v-list-item-title> locale.name </v-list-item-title>
    </v-list-item>
</v-list>

也尝试使用$i18n.setLocale(locale.code) 发生同样的事情。

不确定这是否应该是评论，但由于我还不能评论（需要 50 个代表），我将其发布为问题描述的扩展。