Salesforce LWC学习(四十九) RefreshView API实现标准页面更新，自定义组件自动捕捉更新
Salesforce LWC学习(四十九) RefreshView API实现标准页面更新，自定义组件自动捕捉更新
本篇参考：
https://developer.salesforce.com/docs/platform/lwc/guide/data-refreshview.html
https://developer.salesforce.com/docs/platform/lwc/guide/reference-lightning-refreshview.html
https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007KX6dASAT
我们在前篇中讲述了两种标准页面更新的情况下，自定义页面如何捕捉以及如何操作Salesforce LWC学习(四十七) 标准页面更新以后自定义页面如何捕捉？
随着lwc的更新，我们同样可以通过 refreshView来进行捕捉和自定义组件的更新。
RefreshView API简单介绍
我们直接看一下例子然后进行一下分解：
RefreshViewSampleController: 方法用于获取Account的信息
public with sharing class RefreshViewSampleController {
@AuraEnabled(cacheable=false)
public static Account getAccount(String recordId) {
Account accountItem = [SELECT Name,Industry,Phone from Account where Id = :recordId limit 1];
system.debug(accountItem);
return accountItem;
}
}refreshViewSample.html：显示Account的Name
<template>
{accountName}
</template>refreshViewSample.js: 用来获取Account信息，赋值Account Name以及注册和解除注册 RefreshHandler。这里我们细节的分析一下。
- 头部需要引入必要的方法。import {registerRefreshHandler，unregisterRefreshHandler } from "lightning/refresh"; 用来注册/取消注册在refresh process中的refresh handler.
- connectedCallback来注册refreshHandler。该方法有两个参数。
contextElement—(Required) 一个html element代表参与在刷新流程中的container，通常可以用this。providerMethod—(Required) 一个函数，用于标识刷新过程开始时要调用的回调函数。 处理程序回调需要返回一个代表其特定元素的刷新状态的 Promise。
- disconnectedCallback来取消refreshHandler。
这里我们看一下第16行的注释。如果当前的org启用了lws，则使用目前的代码，如果当前的org没有启用lws，使用了lightning locker，则打开16行的注释并且将14行注释。
1 import { LightningElement, track, wire, api } from "lwc";
2 import getAccount from "@salesforce/apex/RefreshViewSampleController.getAccount";
3 import {
4 registerRefreshHandler,
5 unregisterRefreshHandler
6 } from "lightning/refresh";
7 export default class refreshViewSample extends LightningElement {
8 accountName;
9 refreshHandlerID;
10 @api recordId;
11
12 connectedCallback() {
13 // Session Setting --> Use Lightning Web Security for Lightning web components and Aura components
14 this.refreshHandlerID = registerRefreshHandler(this, this.refreshHandler);
15 // if the component runs in an org with Lightning Locker instead of LWS, use
16 // this.refreshHandlerID = registerRefreshHandler(this.template.host, this.refreshHandler.bind(this));
17 this.retrieveAccount();
18 }
19
20 disconnectedCallback() {
21 unregisterRefreshHandler(this.refreshHandlerID);
22 }
23
24 refreshHandler() {
25 return new Promise((resolve) => {
26 this.retrieveAccount();
27 resolve(true);
28 });
29 }
30
31 retrieveAccount() {
32 getAccount({ recordId: this.recordId })
33 .then((result) => {
34 this.accountName = result.Name;
35 })
36 .catch((error) => {
37 console.log("execute error");
38 });
39 }
40 }效果展示：
除这种system/app-trigger以外，还可以是两个组件间的触发方式。比如一个组件去this.dispatchEvent(new RefreshEvent()); 另外一个组件进行注册以及处理。这种场景不在本篇的范围，感兴趣的小伙伴可以自行尝试。
总结：篇中通过一个demo来介绍RefreshView API的两个方法以及所可以达到的标准页面更新，自定义组件进行捕捉的demo。使用这个功能需要启用 lightning locker或者lightning web security，此api还有一些其他的方法以及一些限制没有讲，只是抛砖引玉，感兴趣的小伙伴可以自行查看文档。篇中有错误地方欢迎指出，有不懂欢迎留言。