Magento使用mixin扩展组件时如何访问jsLayout配置数据

define(["ko"], function (ko) {
    'use strict';

    var mixin = {
        // 方案1：用defaults配合imports自动绑定配置
        defaults: {
            someConfigVariable: false,
            imports: {
                someConfigVariable: "${ $.config.SomeConfigVariable }"
            }
        },

        // 方案2：无需imports，初始化完成后直接读取实例上的配置
        initialize: function () {
            this._super();
            // 已完成配置加载，直接从config属性读取
            this.someConfigVariable = this.config.SomeConfigVariable ?? false;
            // 补充：XML里配置的是string类型的true，如需布尔值可以转换
            // this.someConfigVariable = this.config.SomeConfigVariable === 'true';
            return this;
        },
    };

    return function (target) {
        return target.extend(mixin);
    };
});

你遗漏了三个核心点：

• 配置路径写错：XML中你把SomeConfigVariable放在了config节点下，import的路径必须带上config层级，正确写法为${ $.config.SomeConfigVariable }
• 初始化顺序错误：你在调用_super()之前就给someConfigVariable赋值了默认值，直接覆盖了imports导入的配置值，必须先执行父类initialize完成配置加载，再处理自定义逻辑
• 对mixin入参理解错误：Magento的uiComponent mixin工厂函数的第二个参数不会传入组件配置，所有配置在实例初始化完成后都会挂载到this.config属性上，直接读取即可

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