Vue.js调用导入mixin的翻译方法报undefined错误如何解决

问题根因 #

报错由三个逻辑问题共同导致：

• 生命周期时序错误：原mixin中读取URL参数设置当前语言的逻辑写在mounted钩子，而组件data()初始化、计算属性首次求值的执行时机都早于mounted，初始化阶段拿不到正确的语言值
• 翻译方法无兜底逻辑：原__()方法没有逐层校验对象属性是否存在，一旦语言值异常、全局/本地翻译对象缺失对应字段，直接读取子属性就会抛出类型错误
• 选项初始化逻辑错误：在data()中调用计算属性生成选项列表，data执行阶段组件计算属性还未完成挂载，且初始化时生成的是静态字符串，后续语言切换时选项文案不会自动更新

修复步骤 #

1. 修复languageMixin逻辑 #

• 将URL参数读取逻辑提前到mixin初始化阶段，不要等mounted钩子再赋值语言
• 给__()方法增加多层级空值兜底，找不到对应翻译时默认返回原key，避免抛错
  修复后代码：

import {translations} from "./translations.js";

// 初始化时直接读取URL参数，保证初始语言值正确
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const initLang = urlParams.get('lang') || 'en';
const initDomain = urlParams.get('domain');

export const languageMixin = {
    data() {
        return {
            language: initLang,
            translations: translations,
            domain: initDomain
        }
    },
    methods: {
        __(key) {
            // 优先读全局翻译，逐层校验属性存在性
            if (
                window.translations &&
                Object.prototype.hasOwnProperty.call(window.translations, key) &&
                window.translations[key][this.language]
            ) {
                return window.translations[key][this.language]
            }
            // 读本地翻译文件，加兜底判断
            if (
                this.translations &&
                this.translations[this.language] &&
                Object.prototype.hasOwnProperty.call(this.translations[this.language], key)
            ) {
                return this.translations[this.language][key];
            }
            // 找不到翻译默认返回key，避免页面空白、报错
            return key;
        }
    }
};

2. 修复业务组件选项逻辑 #

• 移除data中对reasons的静态初始化，不要在data里调用计算属性/方法
• 将下拉选项列表改为计算属性，自动依赖language响应式变量，语言切换时自动更新翻译文案
• 把multiselect组件写死的placeholder替换为动态翻译调用
  修复后组件核心代码：

import { Multiselect } from "../modules/multiselect/vue-multiselect.js";
import { languageMixin } from "../mixins/languageMixin.js";

Vue.component('multiselect', Multiselect);

const templateReasonField = `
    <div class="form-group col">
        <label :for="'refundselectReason1'">{{ __('Return reason') }}*</label>
        <div class="input-group">
            <multiselect
                :id="'refundselectReason1'"
                v-model="selectedReason"
                @select="reasonSelected($event)"
                :options="reasons"
                label="label"
                track-by="value"
                :placeholder="__('Select one')"
                required
            ></multiselect>
        </div>
    </div>`;

export const ReasonField = {
    template: templateReasonField,
    mixins: [languageMixin],
    props: [],
    components: {
        Multiselect
    },
    data() {
        return {
            otherReasonOpt: {value: 'Other', label: 'Other'},
            selectedReason: null,
            otherReason: ''
        }
    },
    computed: {
        // 响应式生成选项列表，语言变化自动重算翻译
        reasons() {
            return [
                {value: 'test1', label: this.__('Return reason')},
                {value: 'test2', label: this.__('Product to return')},
                {value: 'test3', label: this.__('Select one')},
                this.otherReasonOpt
            ]
        }
    },
    // 原有业务方法如reasonSelected保持不变
}

验证说明 #

修复后：

• 组件初始化阶段就能拿到正确的语言值，不会出现翻译方法读取undefined属性的错误
• 选项文案会跟随当前语言自动翻译，切换语言时不需要手动刷新选项
• 翻译缺失时会显示原key，不会阻塞页面渲染

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