Salesforce LWC學習(四十九) RefreshView API實現標準頁面更新，自定義組件自動捕捉更新 Salesforce LWC學習(四十七) 標準頁面更新以後自定義頁面如何捕捉？

本篇參考： 

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。這裏我們細節的分析一下。

1. 頭部需要引入必要的方法。import {registerRefreshHandler，unregisterRefreshHandler } from "lightning/refresh";  用來註冊/取消註冊在refresh process中的refresh handler.

2. connectedCallback來註冊refreshHandler。該方法有兩個參數。

• contextElement—(Required) 一個html element代表參與在刷新流程中的container，通常可以用this。
• providerMethod—(Required) 一個函數，用於標識刷新過程開始時要調用的回調函數。 處理程序回調需要返回一個代表其特定元素的刷新狀態的 Promise。

3. 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還有一些其他的方法以及一些限制沒有講，只是拋磚引玉，感興趣的小夥伴可以自行查看文檔。篇中有錯誤地方歡迎指出，有不懂歡迎留言。