Magento 从 mixin 访问 jsLayout 配置数据

Posted 2023-03-27

【中文标题】Magento 从 mixin 访问 jsLayout 配置数据

【英文标题】：Magento accessing jsLayout config data from a mixin

【发布时间】：2021-10-31 04:47:37

【问题描述】：

我想扩展淘汰组件的功能。我已将配置添加到有问题的 xml 文件中：

<arguments>
    <argument name="jsLayout" xsi:type="array">
        <item name="components" xsi:type="array">
...
            <item name="example">
                ... other properties of the component
                <item name="config" xsi:type="array">
                    <item name="SomeConfigVariable" xsi:type="string">true</item>
                </item>
            </item>
...
        </item>
    </argument>
</arguments>

我已经使用我的模块 requirejs-config.js 包含了 mixin，我可以看到它在我的浏览器中遇到了断点。

var config = 
    config: 
        mixins: 
            "Magento_MODULE/js/view/example": 
                "VENDOR_MODULE/js/view/example-mixin": true,
            
        ,
    ,
;

但是我似乎找不到获取配置数据所需的代码，我已经尝试过：

define(["ko"], function (ko) 
    var mixin = 
        imports: 
            someConfigVariable: "$ $.SomeConfigVariable ", // Doesn't seem to do anything
        ,

        initialize: function () 
            this.someConfigVariable = false; // Default value
            this._super();
            return this;
        ,
    ;

    return function (target, config)  // config is undefined
        return target.extend(mixin);
    ;
);

我错过了什么？

【参考方案1】：

mixin 代码并不是绝对必要的。像这样将其设置为默认值：

define(["ko"], function (ko) 
    var mixin = 
        defaults: 
            someConfigVariable: false,
        ,

        initialize: function () 
            this._super();
            return this;
        ,
    ;

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

并将布局 xml 更新为如下所示：

<arguments>
    <argument name="jsLayout" xsi:type="array">
        <item name="components" xsi:type="array">
...
            <item name="example">
                ... other properties of the component
                <item name="config" xsi:type="array">
                    <item name="SomeConfigVariable" xsi:type="boolean">true</item> <!-- Note the xsi:type as boolean -->
                </item>
            </item>
...
        </item>
    </argument>
</arguments>

在运行组件时得到我想要的结果。 Magento 在使用initConfig 方法之前对config 元素做了一些魔术。