在哪里执行方法以在 nuxt-i18n 中持久更改语言环境？

Question

我正在关注有关如何更改语言 (https://nuxt-community.github.io/nuxt-i18n/lang-switcher.html) 的文档，它工作得很好。但是，每当我将nuxt.config.js 中的detectBrowserLanguage.useCookie 和detectBrowserLanguage.alwaysRedirect 设置为true 时，我都应该调用this.$i18n.setLocaleCookie(locale) 方法来保持更改（如文档所述）。

我唯一的问题是，我应该在哪里调用这个方法？

我当前的代码：

<nuxt-link
  class="px-6 py-2 block"
  :click="this.$i18n.setLocaleCookie(locale)"
  v-for="locale in availableLocales"
  :key="locale.code"
  :to="switchLocalePath(locale.code)">{{ locale.code.toUpperCase() }}

export default {
  computed: {
    availableLocales () {
      return this.$i18n.locales.filter(i => i.code !== this.$i18n.locale)
    }
  }
}

如您所见，我尝试在链接的点击事件上运行this.$i18n.setLocaleCookie(locale)，但我得到Cannot read property '$i18n' of undefined

Answer 1

尝试在插件中调用它

export default async function ({app, store}) {
  // on change locale
  app.i18n.beforeLanguageSwitch = (oldLocale, newLocale) => {
    ...
  }
}

nuxt.config.js

  plugins: [
    '~/plugins/i18n.js'
  ],