Vue3中如何在Vuex Getters中使用Vue I18n的$t方法？

报错原因 #

你遇到的Cannot read properties of undefined (reading 't')错误，本质是导入的i18n对象不是有效的Vue I18n实例，或者实例还未完成初始化，导致t方法无法访问。

解决方案 #

方案1：确保导入正确初始化的i18n实例 #

首先检查你的locales/i18n.js文件，确认是默认导出已初始化的I18n实例：

// locales/i18n.js
// Vue 2 写法
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import messages from './messages' // 你的语言包文件

Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: 'zh-CN', // 默认语言
  messages // 语言包内容
})

export default i18n // 这里是默认导出，不是命名导出

或者Vue 3的写法：

// locales/i18n.js
import { createI18n } from 'vue-i18n'
import messages from './messages'

const i18n = createI18n({
  locale: 'zh-CN',
  messages
})

export default i18n

然后在getters文件中默认导入i18n，并根据Vue版本正确调用t方法：

// getters.js
import i18n from '../../locales/i18n.js'; // 去掉花括号，用默认导入

const getters = {
    guaranteePolicies: state => {
        let guaranteesState = state.rangeUpdateData.guarantees;
        let guarantees = [{
            value : "",
            // Vue 2 直接用i18n.t，Vue 3 用i18n.global.t
            label :  i18n.global?.t("chooseGuarantee") || i18n.t("chooseGuarantee"),
            disabled : true
        }];
        for (let index in guaranteesState) {
            guarantees.push({
                value : guaranteesState[index].ID,
                label : guaranteesState[index].Name
            });
        }
        return guarantees;
    }
}

方案2：将i18n实例挂载到Vuex Store上（Vue 2适用） #

在Store初始化文件中，把i18n实例挂载到store对象上：

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import i18n from '../locales/i18n.js'
import getters from './getters'

Vue.use(Vuex)

const store = new Vuex.Store({
  getters,
  // 其他state、mutations、actions配置
})

// 挂载i18n到store
store.$i18n = i18n

export default store

然后在getters中使用普通函数（不要用箭头函数，避免丢失this指向）访问this.$i18n.t：

const getters = {
    guaranteePolicies: function(state) {
        let guaranteesState = state.rangeUpdateData.guarantees;
        let guarantees = [{
            value : "",
            label :  this.$i18n.t("chooseGuarantee"),
            disabled : true
        }];
        for (let index in guaranteesState) {
            guarantees.push({
                value : guaranteesState[index].ID,
                label : guaranteesState[index].Name
            });
        }
        return guarantees;
    }
}

额外检查 #

• 确认你的语言包messages中存在chooseGuarantee这个键，避免出现翻译缺失的情况。
• 如果是异步加载语言包，要确保在调用i18n.t前语言包已经加载完成，否则可能会返回键名本身。

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