分类： Codes

本文得到了 ChatGPT 提供的专业建议和技术支持，特此致谢。
该文章由Notion AI辅助完成。

随着Lightning Web Components（LWC）的兴起，越来越多的开发者开始使用LWC来构建自己的Lightning组件。在这个过程中，我们可能会遇到一些需要替换旧版Aura组件的场景。其中，Aura的Refresh View是一个比较常见的用例。在LWC中，可以使用getRecordNotifyChange方法来实现这个功能。

让我们来回顾一下Aura的Refresh View

在Aura中，我们可以使用force:refreshView事件来实现类似Aura Refresh View的功能。下面是一个示例代码：

({
    handleRecordChange: function(component, event, helper) {
        $A.get('e.force:refreshView').fire();
    }
})

在上面的代码中，当记录发生变化时，会触发force:refreshView事件，从而实现页面的自动刷新。
需要注意的是，force:refreshView事件只能在Lightning Experience和Salesforce移动应用中使用，而不能在Classic中使用。如果需要在Classic中实现类似的功能，可以考虑使用force:refreshViewAction事件。

如何使用getRecordNotifyChange

在LWC中，我们可以使用getRecordNotifyChange方法来实现类似的功能。该方法可以监听记录变化并触发页面刷新。它的基本用法如下：

import { LightningElement, api, wire } from 'lwc';
import { getRecordNotifyChange } from 'lightning/uiRecordApi';

export default class MyComponent extends LightningElement {
    @api recordId;

    handleRecordChange(event) {
        getRecordNotifyChange([this.recordId]);
    }
}

在上面的例子中，我们使用了@wire装饰器来监听记录的变化，当记录发生变化时，会调用handleRecordChange方法。该方法会调用getRecordNotifyChange方法来触发页面刷新。

需要注意的是，getRecordNotifyChange方法只能在LWC中使用，而不能在Aura组件中使用。如果我们需要在Aura组件中实现类似的功能，可以考虑使用force:refreshView事件来刷新页面。

本文得到了 ChatGPT 提供的专业建议和技术支持，特此致谢。

在上一篇文章《在LWC中如何使用ExcelJS》中介绍了如何在LWC中引入并使用ExcelJS。但是挖了一个坑，就是为什么在LoadScript之前要添加如下两句

            var regeneratorRuntime = undefined;
            window.regeneratorRuntime = regeneratorRuntime;

首先，ExcelJS由于要大量操作与渲染数据，为了避免页面经常卡死，所以使用了regenerator-runtime库以便更容易的进行异步操作。
就是说ExcelJS依赖regenerator-runtime库。

然后，ExcelJS在加载时会判断当前运行上下文中使用有变量regeneratorRuntime存在。如果没有找到该变量，ExcelJS会认为当前运行环境默认支持regenertor-runtime。不过LWC运行环境并不支持regenertor-runtime所以导致报错。

但是，如果我们手动的定义一个全局变量regeneratorRuntime，则相当于告诉ExcelJS，不要尝试使用运行环境的regenertor-runtime，去使用全局变量定义的regenertor-runtime。

但是又由于我们定义的regenertor-runtime为undefined，则迫使ExcelJS放弃全局变量定义的regenertor-runtime，转而使用自己准备的regenertor-runtime以保证自己可以成功加载与运行。

以下流程图由ChatGPT生成(请点击View Source查看)

                                 +----------------------+
                                 |                      |
                                 |   Load ExcelJS into   |
                                 |   Lightning Web      |
                                 |   Component (LWC)    |
                                 |                      |
                                 +----------+-----------+
                                            |
                                  +---------+---------+
                                  |                   |
                                  |   ExcelJS checks   |
                                  |   for              |
                                  |   regeneratorRuntime|
                                  |                   |
                                  +---------+---------+
                                            |
                            +---------------+---------------+
                            |                               |
                      +-----v-----+                 +---------+---------+
                      |           |                 |                   |
                      | regeneratorRuntime found    |    ExcelJS uses   |
                      |           |                 |native JS generator|
                      +-----+-----+                 +---------+---------+
                            |                                   |
                    +-------+-------+                           |
                    |               |                           |
        +-----------v---+   +-------v---+               +-------v------+
        |               |   |           |               |              |
        | Define        |   | Define    |               |ExcelJS reports|
        | regenerator-  |   | regenerator-             |      error    |
        | Runtime as    |   | Runtime as               |               |
        | undefined     |   | function()               |               |
        |               |   | {return;};               |               |
        +-------+-------+   +-------------+             +-------+------+
                |                               +-----------------+
                |                               |                 |
                |                               | ExcelJS executes |
                |                               | successfully    |
                |                               |                 |
                +-------------------------------+-----------------+

某日，
打水途中看到某位同学眉头紧锁双手合十做沉思状，于是乎忍不住凑了过去。
哦。。。原来在写Lightning Component。隐隐约约看到密密麻麻的controller.js代码感觉不妙。
“咳。”为了避免吓到他，我轻咳了一下表示进场。
只见他先是略微抬起头，之后彻底滑落到了椅子上。
“唉，事情是这样的，” 他用沙哑的嗓音说道，“最开始他们要我做一个button，点了之后去后台更新一条数据，将其字段A__c更新为a。”
他把自己从椅子上重新支了起来，指着屏幕说，“这个很简单，我放了一个attribute来存需要更新的数据的id，然后在lightning button的onClick属性指定controller的方法，在controller的方法中cmp.get那个attribute的值，之后传给apex去更新这条数据。”
我微微点头表示赞同。“没毛病。然后呢？”

“然后，他们又说，要再加一个button，点这个button之后，要给这条数据的字段A__c更新为b。OK，我在cmp中加了又一个button，然后在controller里又为了新button新建了一个方法，与之前的方法不同的是，更新的值为空。”
“也不是不可以呀。“
“对，”接下来他双眼空洞的目视前方。“然后他们又让我加三个button，点了之后分别赋值b,c,d。这时候我意识到情况不对，打算在button的conlick事件把值传给controller中的方法，这样就不用每加一个button就新加一个方法了。结果……我发现……lightning button的onclick根本不能设参数，controller的方法参数也是固定的。我没办法了……”

“我明白你的意思了”。我按住了他的肩膀。

在常规前端开发中，在button的click事件中绑定的js函数传递不同的值是常见做法。如果点击button之后，处理相同，仅是需要处理的参数不同的情况应该对代码进行合理的复用。如下例。

let foo1 = function(param1) {
console.log(param1);
}
<div>
    <input type="button" name="Button" onClick="foo1('a')"/>
</div>

但是lightning button（官方文档）的onclick事件，并没有提供直接传递参数的方式。所以我们只能走曲线救国的路线。
其实很简单。
首先，在官方文档里提到，

You can retrieve the button that’s clicked by using event.getSource(). For example, to retrieve the label on the button, use event.getSource().get("v.label").

说明我们可以在controller的方法中拿到event的触发者——被点击的button，然后获得此button上的属性——比如Label。

那么就好办了，首先我们在lightning button上光明正大的设置value属性

<lightning:button label="button1" title="create" onclick="{!c.updateRecord}" value="a"/>

然后在controller的方法中，去get这个button的value属性，接下来正常执行业务逻辑就可以了。

({   
    updateRecord : function (component, event, helper) {
        let targetValue = event.getSource().get("v.value");
        // YOUR STATEMENT HERE ......
    }
})

好了，水凉了，还得重新接一杯。