使用vue-i18n时如何监听i18n locale变化触发函数，是否需用Vuex？

核心结论：无需额外引入Vuex处理基础的locale变更监听逻辑，vue-i18n本身就提供了完整的原生能力满足需求。

具体实现方式（按vue-i18n版本区分） #

vue-i18n v9+（适配Vue3 组合式API场景） #

• 方案1：使用watch直接监听i18n实例的响应式locale属性
  代码示例：

  import { useI18n } from 'vue-i18n'
  const i18n = useI18n()
  
  watch(
    () => i18n.locale.value,
    (newLocale, oldLocale) => {
      // 在此处编写语言切换后需要执行的自定义逻辑，比如重新拉取对应语言的内容、重置页面相关状态
      yourCustomFunction(newLocale, oldLocale)
    },
    { immediate: true } // 可选配置：组件首次加载时立即执行一次回调
  )
  

• 方案2：使用vue-i18n内置的onLocaleChanged生命周期钩子，这是更轻量的专用方案

  import { onLocaleChanged } from 'vue-i18n'
  
  onLocaleChanged((newLocale, oldLocale) => {
    // 语言切换触发的自定义逻辑
    yourCustomFunction(newLocale, oldLocale)
  })
  

  该钩子在组件setup作用域内使用时，会自动绑定组件生命周期，组件销毁后自动解绑监听，不会产生内存泄漏。

vue-i18n v8（适配Vue2 Options API场景） #

• 组件内监听逻辑：直接在组件的watch配置块中，监听全局注入的$i18n.locale属性即可

  export default {
    watch: {
      '$i18n.locale'(newLocale, oldLocale) {
        this.yourCustomFunction(newLocale, oldLocale)
      }
    },
    methods: {
      yourCustomFunction(newVal, oldVal) {
        // 自定义逻辑实现
      }
    }
  }
  

• 非组件全局场景（如路由守卫、请求拦截器）监听：直接对项目中导出的全局i18n实例的locale属性做响应式监听即可，无需额外依赖。

什么场景才需要结合Vuex处理locale逻辑 #

• 仅当你需要将当前locale状态和全局业务状态深度绑定（比如跨非组件模块同步用户语言偏好、将语言选择结果同步到服务端用户配置）时，才需要把locale状态映射到Vuex store中。
• 仅实现“语言切换时触发指定函数”的基础需求时，引入Vuex反而会增加不必要的状态同步成本，原生API完全可以覆盖。

内容的提问来源于stack exchange，提问作者Serio