Vue.js中如何在导出对象中访问this以调用vue-i18n的$t方法？

嘿，我完全懂你碰到的麻烦——在Vuex的mutation文件里想调用vue-i18n的$t方法，但不管是用this.$t还是直接导入Vue构造函数调用vue.$t都没效果，对吧？这其实是因为Vuex的mutation和Vue组件实例的上下文不一样，咱们来一步步解决它：

为什么原来的方法行不通？ #

• Vuex的mutation是纯函数，它的执行上下文和Vue组件实例完全无关，所以this根本指向不到组件里的$t方法。
• 你直接导入的Vue是构造函数，不是当前项目已经初始化好的Vue应用实例，而$t是挂载在应用实例上的方法，所以自然调用不了。

解决方案1：直接导入I18n实例（最推荐） #

这是最简洁的方法，只需要在创建i18n实例的时候把它导出，然后在mutation文件里导入使用就行：

1. 修改你的i18n配置文件（比如src/i18n.js）：

import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

// 创建i18n实例并导出
const i18n = new VueI18n({
  locale: 'zh-CN', // 你的默认语言
  messages: {
    'zh-CN': { /* 中文翻译内容 */ },
    'en': { /* 英文翻译内容 */ }
  }
})

export default i18n

2. 在main.js里挂载i18n到Vue实例：

import Vue from 'vue'
import App from './App.vue'
import i18n from './i18n'
import store from './store'

new Vue({
  i18n,
  store,
  render: h => h(App)
}).$mount('#app')

3. 在mutation文件里使用i18n实例的t方法：

import i18n from '../i18n' // 路径根据你的项目结构调整

export default {
  someFunction(state) {
    // 直接调用i18n.t()获取翻译文本
    const translatedText = i18n.t('TRANS_TOKEN')
    // 接下来就可以用这个文本做你需要的操作啦
    console.log(translatedText)
  }
}

解决方案2：调用mutation时传入$t方法 #

如果你不想全局导入i18n实例，也可以在组件调用mutation的时候，把组件里的$t作为参数传进去：

1. 在Vue组件里调用mutation：

export default {
  methods: {
    triggerMutation() {
      this.$store.commit('someFunction', {
        // 其他需要传给mutation的参数
        t: this.$t // 把组件的$t方法传进去
      })
    }
  }
}

2. 在mutation里接收并使用$t：

export default {
  someFunction(state, payload) {
    const translatedText = payload.t('TRANS_TOKEN')
    // 后续操作...
  }
}

补充：如果是Vuex Actions的情况 #

虽然你问的是mutation，但顺便提一下——在Vuex的actions里，你可以通过context.app.$t直接调用翻译方法，因为actions的上下文会包含当前Vue应用实例的app属性：

export default {
  async someAction(context) {
    const translatedText = context.app.$t('TRANS_TOKEN')
    // ...
  }
}

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