Vue I18n：消息变更时无法重新渲染问题

嘿，我懂你遇到的问题——异步获取新的翻译数据后，页面上的$t指令内容没跟着更新，对吧？这是因为直接修改原始locale对象的话，VueI18n没法检测到数据变化，自然不会触发视图重新渲染。下面给你说下正确的做法：

用VueI18n官方API更新翻译数据 #

VueI18n提供了setLocaleMessage（完全替换某语言的翻译）和mergeLocaleMessage（合并新增/修改的翻译）两个方法，用它们来更新翻译数据，就能自动触发视图更新了。

完整可运行示例 #

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
<div id="app">
  <p>{{ $t("home") }}</p>
  <button @click="fetchNewTranslations">获取新翻译</button>
</div>

const initialMessages = { 
  id: { home: 'Beranda' }, 
  en: { home: 'Home' } 
}
const i18n = new VueI18n({ 
  locale: 'id',
  messages: initialMessages // 初始化时传入初始翻译
})

new Vue({ 
  el: '#app', 
  i18n, 
  methods: {
    fetchNewTranslations() {
      // 模拟异步请求获取新翻译的过程
      setTimeout(() => {
        // 假设这是你异步拿到的新翻译数据
        const newMessages = {
          id: { home: 'Halaman Utama' },
          en: { home: 'Main Page' }
        }
        
        // 遍历更新每种语言的翻译
        Object.keys(newMessages).forEach(lang => {
          this.$i18n.setLocaleMessage(lang, newMessages[lang])
        })
        
        // 如果需要切换语言，直接改locale就行，也会自动渲染
        // this.$i18n.locale = 'en'
      }, 1000)
    }
  },
  created () {
    // 如果页面加载时就要异步获取翻译，直接在这里调用方法就行
    // this.fetchNewTranslations()
  }
})

为什么你的原代码不生效？ #

你之前应该是直接修改了locale对象，但VueI18n内部的消息存储并不是简单的响应式对象——只有通过它提供的API来修改，才能触发内部的响应式更新机制，让页面重新渲染最新的翻译内容。

额外小技巧 #

如果只是要更新某一种语言的部分翻译，不用完全替换，用mergeLocaleMessage更方便：

// 只更新印尼语的home翻译，其他翻译保持不变
this.$i18n.mergeLocaleMessage('id', { home: 'Halaman Utama' })

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