如何在 Nuxt 中观察 i18n 语言环境的变化？答案

【问题标题】：How to watch for i18n locale change in Nuxt?如何在 Nuxt 中观察 i18n 语言环境的变化？
【发布时间】：2022-10-24 05:58:22
【问题描述】：

我已经安装点 3和i18n

我想要改变文件方向何时语言环境切换

例如 <body dir="ltr"> 到 <body dir="rtl" >

但我找不到任何打回来文档中的功能！

我知道我可以在 $i18n.locale 上放一些手表，但我认为不是最好的这样做的方法。

我记得在 Nuxt 2 / i18n 我们有一个名为“onLocaleChanged“但我在新版本中找不到版本！

plugins/i18n.ts

import { createI18n } from 'vue-i18n'
import en from '~~/locales/en'
import fa from '~~/locales/fa'
export default defineNuxtPlugin(({ vueApp }) => {
  const i18n = createI18n({
    legacy: false,
    globalInjection: true,
    locale: 'fa',
    messages: {
      en,fa
    }
  })
  vueApp.use(i18n)
})

package.json

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "@intlify/unplugin-vue-i18n": "^0.7.0",
    "@intlify/vite-plugin-vue-i18n": "^6.0.3",
    "@nuxtjs/tailwindcss": "^5.3.3",
    "nuxt": "3.0.0-rc.10",
    "sass": "^1.55.0",
    "sass-loader": "10.1.1",
    "tailwindcss-flip": "^1.0.0",
    "vue-i18n": "^9.2.2"
  },
  "dependencies": {
    "@heroicons/vue": "^2.0.11",
    "@kyvg/vue3-notification": "^2.4.1",
    "@nuxt-hero-icons/outline": "^1.0.1",
    "@nuxt-hero-icons/solid": "^1.0.1",
    "@pinia/nuxt": "^0.4.2",
    "@vueform/multiselect": "^2.5.2",
    "axios": "^0.27.2",
    "daisyui": "^2.28.0",
    "jenesius-vue-modal": "^1.7.2",
    "sweetalert2": "^11.4.33",
    "vee-validate": "^4.6.7",
    "vue-recaptcha-v3": "^2.0.1",
    "vue3-loading-overlay": "^0.0.0",
    "yup": "^0.32.11"
  }
}

【问题讨论】：

尝试检查 Vue devtools 并检查那里的 $i18n 实例，您可能会看到 watch 可以看到的东西，例如 locale。没有发出特定事件，但如果适应组合 API，这个 kind of solution 应该仍然有效。
thnx 我找不到 i18n 实例方法，我确实喜欢链接中的那个解决方案
你好，这里有消息吗？
嗨，我找不到任何回调
你不能在观察者的块内做你想做的事吗？

标签： vue.js nuxt.js nuxtjs3 vue-i18n nuxt-i18n

【解决方案1】：

你可以使用this answer 之类的东西。

watch: {
  '$i18n.locale': function(newVal, oldVal) {
    console.log('locale change', newVal)
  }
}

因为我不确定是否有为此目的的给定事件。

【讨论】：