Salesforce LWC學習(五) LDS & Wire Service 實現和后台數據交互 & meta xml配置

之前的幾節都是基於前台變量進行相關的操作和學習，我們在項目中不可避免的需要獲取數據以及進行DML操作。之前的內容中也有提到wire注解，今天就詳細的介紹一下對數據進行查詢以及DML操作以及Wire Service相關的知識。

一. LDS

學習LDS以前可以先看一下aura中LDS的概念salesforce lightning零基礎學習(六)Lightning Data Service(LDS)。針對LWC中的LDS和aura中的功能原理很像，區別可能是語法和標簽的區別。所以這里對LDS不做過多的描述，直接展開標簽的用法。

LWC 封裝了3個最基礎的組件去和數據進行交互。分別是lightning-record-form / lightning-record-edit-form / lightning-record-view-form。和aura的用法也類似，lightning-record-form可以作為view/edit視圖使用，lightning-record-edit-form針對edit視圖使用並可以進行最大可能的自定義UI，lightning-record-view-form針對view視圖使用並可以進行最大可能的自定義UI。

他們可以實現最基礎的交互，如果他們標准功能滿足不了，我們需要更加的自定義的功能，需要使用@wire 去指定LDS 的wire adapter。（封裝在lightning/ui*Api中）

1. lightning-record-form

當我們只有ID，希望根據當前的用戶顯示當前用戶對應的page layout布局的內容。我們便可以使用 lightning-record-form標簽了，此標簽遵循着FLS關系，用戶只能看到自己可見的字段。此標簽有三個模式：
view: 以output field展示，針對有權限編輯的字段，會顯示編輯的按鈕，當編輯某個值以后會顯示save/cancel 按鈕。

read-only：和上面區別為不顯示可編輯按鈕。

edit:以輸入框進行展示，然后顯示save/cancel按鈕。

myComponentWithRecord 展示了 lightning:record-form的view的demo。

myComponentWithRecord.html：使用lightning-record-form展示account的detail數據，layout-type選擇的是compact，mode為view。

<template>
    <lightning-record-form
        record-id={recordId}
        object-api-name="Account"
        layout-type="Compact"
        mode="view">
    </lightning-record-form>
</template> 

myComponentWithRecord.js：聲明一個public的變量，名稱固定為recordId。

// myComponent.js
import { LightningElement, api } from 'lwc';
export default class MyComponent extends LightningElement {
    @api recordId;
}

myComponentWithRecord.js-meta.xml：配置當前component只允許用到record page中，並且只有account的record page可以選擇此component。下面的內容我們會詳細的講解如何配置此xml文件，以及各個標簽的作用。

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="myComponentWithRecord">
    <apiVersion>46.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordPage">
            <property name="recordId" type="String"></property>
            <objects>
                <object>Account</object>
            </objects>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

配置完以后我們只需要找到一個account，更改page layout或者app builder中針對account的lightning record page拖拽此component即可顯示。

上面的demo中，我們在lightning-record-form中聲明了一些簡單的屬性，除了上述的屬性以外，此標簽還有很多可選擇的屬性。所有屬性如下：

• record-type-id： record type的ID，此屬性用於當前的object有多個record type並且我們不想創建default的record type情況，這時我們需要傳遞 record type id;
• mode: view/edit/readonly。當我們沒有指定ID的情況下，則這個類型默認是edit，即要創建一個object的記錄；當有id情況下，默認是view。
• layout-type： Compact / Full. 用來指定當前的layout展現的形式。當我們新建記錄時，即record id為空的情況下，layout-type只能渲染成Full.
• record-id： 需要展示/操作的記錄ID，如果此屬性為空，則代表要新建一條記錄；
• object-api-name： 當前想要操作的object的API name，此屬性是必填屬性；
• columns： 表單中的列數，通常lightning:record-form不需要設置；
• fields： 如果我們不想通過layout-type展示，我們可以設置此fields選項，去按照我們的要求顯示指定的字段信息。當然lightning:record-form不建議使用此屬性，如果想要自定義顯示字段，我們可以考慮用lightning:record-view-form以及lightning:record-edit-form去實現read/edit模式。
• density：設置label以及field在表單中的排列樣式。有三個值： compact / comfy / auto.其中auto是default的值。

除了上述的屬性以外，因為lightning-record-form有edit mode，所以它還擁有一些方法(以下僅用於edit mode，readonly不可用)：

• load：當LDS加載數據完成后會調用此事件，此事件有一個返回的參數是detail，我們可以通過event.detail獲取相關的內容；
• submit：當form表單提交了改變了的data時會自動觸發此事件，此事件有一個可傳入的參數fields，此參數用來指定要操作的字段集合；
• success：當form表單提交執行成功以后會自動觸發此事件，此事件有一個返回的參數是detail；
• error：當form表單提交執行失敗以后會自動觸發此事件，返回的參數有detail；
• cancel：當form表單沒有提交點擊cancel以后會自動觸發此事件。

這幾個事件在某種情況下還是有一定聯系的。

• 當我們執行submit事件以后，在沒有錯誤的情況下，會先執行load事件，執行成功以后會執行success事件，當執行完success事件以后會再一次load事件。 submit -> load -> success -> load。
• 當我們執行submit事件以后，如果有錯誤會執行error事件。 submit -> error。
• 當我們執行cancel事件以后，將會執行load事件。cancel -> load。
• 當我們執行完cancel事件以后，頁面的cancel/submit按鈕會隱藏，可編輯字段會展示編輯的圖標，當我們對某個字段進行編輯時，會執行load事件。

下面通過一個demo更好的了解edit功能。

myComponentWithRecordEdit.html：展示一個edit模式的lightning-record-form，並針對這些標准的事件設置相關的handler。

<template>
    <lightning-record-form
        record-id={recordId}
        object-api-name={objectApiName}
        fields={fields}
        columns="2"
        mode="edit"
        onsubmit={handleSubmit}
        onsuccess={handleSuccess}
        onerror={handleError}
        oncancel={handleCancel}
        onload={handleLoad}
        >
    </lightning-record-form>
</template>

myComponentWithRecordEdit.js：設置相關的handler邏輯，頭部我們可以看到import salesforce/lightning相關的內容。這個我們在后續會以refrence內容詳細說明。這里還有event.preventDefault()方法。當我們捕獲submit 事件並以編程方式提交表單，這種情況我們需要使用event.preventDefault方法去取消事件的默認行為，否則會進行重復的表單提交。

/* eslint-disable no-console */
import { LightningElement, api } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

import NAME_FIELD from '@salesforce/schema/Account.Name';
import REVENUE_FIELD from '@salesforce/schema/Account.AnnualRevenue';
import INDUSTRY_FIELD from '@salesforce/schema/Account.Industry';

export default class MyComponentWithRecordEdit extends LightningElement {
    // The record page provides recordId and objectApiName
    @api recordId;
    @api objectApiName;

    fields = [NAME_FIELD, REVENUE_FIELD, INDUSTRY_FIELD];

    handleLoad(event) {
        console.log('execute handle load');
    }

    handleSubmit(event){
        console.log('execute handle submit');
        event.preventDefault();       // stop the form from submitting
        const fields = event.detail.fields;
        fields.LastName = 'My Custom Last Name'; // modify a field
        this.template.querySelector('lightning-record-form').submit(fields);
    }

    handleSuccess(event) {
        console.log('execute handle success');
        const evt = new ShowToastEvent({
            title: "Account Operated",
            message: "Record ID: " + event.detail.id,
            variant: "success"
        });
        this.dispatchEvent(evt);
    }

    handleError(event) {
        console.log('execute handle error');
        const evt = new ShowToastEvent({
            title: "Account Operated",
            message: event.detail.message,
            variant: "error"
        });
        this.dispatchEvent(evt);
    }

    handleCancel(event) {
        console.log('execute handle cancel')
        const evt = new ShowToastEvent({
            title: "Account canceled",
            variant: "cancel"
        });
        this.dispatchEvent(evt);
    }
}

效果展示：

1) 點擊Save更新數據操作

2) 當Save后有error情況

 2. lightning-record-view-form

lightning-record-form功能確實比較好用，但是如果用戶想要顯示指定的字段並且希望字段以指定的順序進行顯示只讀的pagelayout時，使用lightning-record-form便無法實現了，這個時候我們需要使用lightning-record-view-form搭配lightning-output-field用來實現按照自己的要求展示一個或者多個字段。顯示時，我們通常搭配grid一起使用按需展現多行多列效果。grid使用可以參考：https://www.lightningdesignsystem.com/utilities/grid/

 此組件有以下的屬性可供選擇：

• record-id：當前要顯示記錄的記錄ID，此字段必填；
• object-api-name： 當前object的API 名稱，此字段必填；
• density：設置label以及field在表單中的排列樣式。

除上述屬性以外，lightning-record-view-form支持load事件，可用參數為data，存儲的是記錄的數據。詳見上面的demo。下面的demo為使用此標簽實現只讀的數據。

 myComponentWithRecordView.html：通過引入lightning-record-view-form，然后配合lightning-output-field展示信息，這里展示的是一行四列的內容布局。

<template>
    <lightning-record-view-form
                record-id={recordId}
                object-api-name="Account">
        <div class="slds-grid">
            <div class="slds-col">
                <lightning-output-field field-name="Name"></lightning-output-field>
            </div>
            <div class="slds-col">
                <lightning-output-field field-name="Phone"></lightning-output-field>
            </div>
            <div class="slds-col">
                <lightning-output-field field-name="AnnualRevenue"></lightning-output-field>
            </div>
            <div class="slds-col">
                <lightning-output-field field-name="Industry"></lightning-output-field>
                
            </div>
        </div>
    </lightning-record-view-form>
</template>

myComponentWithRecordView.js

import { LightningElement, api } from 'lwc';

export default class MyComponentWithRecordView extends LightningElement {
    @api recordId;
}

顯示效果：

 3. lightning-record-edit-form

lightning-record-form可以實現create/edit功能，和view的情況一樣，當用戶想要深度自定義時，lightning-record-form顯然達不到需求，這個時候我們就需要 lightning-record-edit-form。
此組件通常和lightning-input-field一起用，用來顯示需要編輯的字段。我們針對布局中偶爾可能需要顯示只讀字段，我們可以使用lightning-output-field以及lightning-formatted-name一起搭配使用。
此組件支持的方法和lightning-record-form基於edit模式下差不太多,同lightning-record-form一樣，如果想要創建記錄，只需要record-id為空即可。

lightning-record-form與lightning-record-edit-form使用不同的地方可以整理兩點：

1) lightning-record-form有cancel事件，lightning-record-edit-form沒有，需要使用lightning-button展示。針對cancel按鈕的默認處理方式也不同，針對lightning-record-form點擊cancel以后會默認恢復view的狀態，針對lightning-record-edit-form不可以，我們需要針對字段調用reset方法才可以；
2) lightning-record-edit-form 需要使用lightning-button並且type為submit才可以正常提交表單，lightning-record-form不需要。

 下面通過一個demo進行更好的了解。

recordEditFormSample.html

<template>
    <lightning-record-edit-form
        record-id={recordId}
        object-api-name={objectApiName}
        onsubmit={handleSubmit}
        onload={handleLoad}
        onsuccess={handleSuccess}
        onerror={handleError}
        >
        <lightning-messages></lightning-messages>
        <lightning-input-field field-name="Name"></lightning-input-field>
        <lightning-input-field field-name="Industry"></lightning-input-field>
        <lightning-input-field field-name="AnnualRevenue"></lightning-input-field>
        <div class="slds-m-top_medium">
            <lightning-button class="slds-m-top_small" label="Cancel" onclick={handleReset}></lightning-button>
            <lightning-button class="slds-m-top_small" type="submit" label="Save Record"></lightning-button>
        </div>
    </lightning-record-edit-form>
</template>

recordEditFormSample.js

/* eslint-disable no-console */
import { LightningElement, api } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
export default class RecordEditFormSample extends LightningElement {

    @api recordId;
    @api objectApiName;

    handleSubmit(event) {
        event.preventDefault();       // stop the form from submitting
        const fields = event.detail.fields;
        if(fields.Industry === null || fields.Industry === '') {
            const evt = new ShowToastEvent({
                title: "Account Operated Failed",
                message: "Account Industry cannot be blank",
                variant: "error"
            });
            this.dispatchEvent(evt);
            return;
        }
        this.template.querySelector('lightning-record-edit-form').submit(fields);
    }

    handleLoad(event) {
        console.log('execute load');
    }

    handleSuccess(event) {
        const evt = new ShowToastEvent({
            title: "Account Operated Success",
            message: "Record is :" + event.detail.id,
            variant: "success"
        });
        this.dispatchEvent(evt);
    }

    handleError(event) {
        const evt = new ShowToastEvent({
            title: "Account Operated Failed",
            message: event.detail.message,
            variant: "error"
        });
        this.dispatchEvent(evt);
    }

    handleReset(event) {
        const inputFields = this.template.querySelectorAll(
            'lightning-input-field'
        );
        if (inputFields) {
            inputFields.forEach(field => {
                field.reset();
            });
        }
     }
}

效果展示

1) 包含錯誤的情況展示

2. 正常保存的展示

 二. Wire Service

從上面內容可以看到，LDS已經很強大了，但是針對LDS處理不了的情況呢，比如獲取父表信息，對數據中的內容進行格式化處理，這些可能標准功能很難達到或者達不到，這種我們便需要wire adapter去對LDS進行增強。

1. 使用封裝的函數進行LDS增強

我們在組件中使用@wire標簽在javascript中去獲取數據，這些數據由lightning/ui*Api 模塊的一個wire adapter獲取。

wire adapter有很多強大的功能，比如getRecord / getFieldValue(record, field)。 我們在代碼中經常會看到 import salesforce/xxx 以及 import lightning/ui*Api/xxx,我們會在下一節LWC博客中詳細的講解。

我們稱wire service在某種程度上是reactive的，原因是它提供了一個reactive的變量，我們使用$符號聲明在變量前面，當這個變量改變以后，wire service將會獲取一個新的版本的數據，從而重新渲染component。

我們基於三個步驟使用wire service。

import { adapterId } from 'adapterModule';
@wire(adapterId, adapterConfig)
propertyOrFunction;

adapterId： wire adapter的標識符。比如我們需要用到lightning/uiRecordApi中的getRecord，那getRecord為這里的adapterId;
adapterModule：當前這個標識符封裝在哪個適配器模塊中，lwc封裝了好多的wire adapter 標識符，他們在以下的adapterModule中：lightning/uiListApi / lightning:uiObjectInfoApi / lightning:uiRecordApi
adapterConfig：針對wire adapter特定的配置對象信息。配置對象的屬性值可以是字符串，也可以通過@salesforce/schema方式引入的表和字段信息。salesforce比較推薦后者；
propertyOrFunction：一個私有變量或者方法，這個變量或者方法從wire service通過配置信息獲取到最終的數據。如果這個是一個變量聲明了wire，返回的結果為data property以及error property，如果這個是一個方法聲明了wire，這個方法返回的結果包含data property 以及error property。

概念看起來比較繞，通過一個demo（getRecord）便可以更好的了解。
https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.reference_wire_adapters_record

getRecord wire adapter在lightning/uiRecordApi模塊下，所以第一個步驟確定為：
import {getRecord} from 'lightning/uiRecordApi'

adapterConfig 針對getRecord有兩個可以的配置項。

1） { recordId: string, fields: string[], optionalFields?: string[]}

2）{ recordId: string, layoutTypes: string[], modes?: string[], optionalFields?: string[]}

• recordId代表想要獲取的記錄的ID
• fields / layoutTypes這兩個必須要有一個存在。fields代表當前想要查詢的字段，官方建議我們使用@salesforce/schema方式獲取相關的metadata信息。這里需要注意的是，如果當前的上下文用戶沒有針對字段的訪問權限，將會報錯。
• layoutTypes： compact/full這兩個取值，因為pagelayout可能會有改變，所以針對要求固定字段的情況下，使用上述fields方式。如果要跟隨page layout方式，可以選擇此方式
• modes: 當選擇了layoutTypes以后，我們可以選擇modes，可選擇的值為Create/Edit/View。
• optionalFields和fields功能類似，區別為如果引入一個上下文用戶沒有訪問權限的字段，使用此參數不會報錯，沒有權限的字段對應的值不會返回而已。

demo用於獲取account的name並對name進行每個字母都大寫處理：

 RecordViewFormWithWireService.js：使用wire adapter中的getRecord獲取相關metadata的value，然后進行format處理。salesforce建議我們獲取metadata命名采用object_field_name方式，當然這個是規范，不是規則。這里之所以對wiredAccount獲取值部分添加data不為undefined原因是當我們加載數據時，最開始wiredAccount為{}，所以get accountName方法會掛掉提示undefined信息,取Account Name值有兩種方式，一種是通過各種點的方式取到，另一個是通過wire service封裝的getFieldValue方法獲取。

/* eslint-disable no-console */
import { LightningElement,wire,api,track } from 'lwc';
import { getRecord,getFieldValue } from 'lightning/uiRecordApi';
import ACCOUNT_NAME_FIELD from '@salesforce/schema/Account.Name';
import ACCOUNT_INDUSTRY_FIELD from '@salesforce/schema/Account.Industry';
import ACCOUNT_ANNUAL_REVENUE from '@salesforce/schema/Account.AnnualRevenue';
const ACCOUNT_FIELDS = [ACCOUNT_NAME_FIELD,ACCOUNT_INDUSTRY_FIELD,ACCOUNT_ANNUAL_REVENUE];
export default class RecordViewFormWithWireService extends LightningElement {
    @api recordId;

    @wire(getRecord,{recordId:'$recordId',fields:ACCOUNT_FIELDS})
    wiredAccount;

    get accountName() {
        // console.log(JSON.stringify(this.wiredAccount));
        // console.log('xx');
        // if(this.wiredAccount.data !== undefined) {
        //     return this.wiredAccount.data.fields.Name.value.toUpperCase();
        // }
        // return '';
        return this.wiredAccount.data != undefined ? getFieldValue(this.wiredAccount.data,ACCOUNT_NAME_FIELD).toUpperCase() : '';
    }
}

  recordViewFormWithWireService.html

<template>
    {accountName}
</template>

結果展示：

上面的wire service中只簡單的描述了getRecord的用法以及順帶描述了getFieldValue，LWC提供了很多的wire adapter function，下一節的博客會有詳細的說明。當我們使用了wire adapter增強LDS以后，可以做到更強的功能，比如獲取父對象字段值，進行字段值的format。但是我們想要更復雜的操作，比如對數據進行filter，獲取子數據信息，那我們就得需要訪問apex獲取數據了。下面內容為通過apex獲取數據。

2. 和后台apex方法交互

有兩種方式可以調用apex方法，一種是wire方式直接調用，另外一種通過指定的命令方式。下面對這兩種方式進行簡單的介紹。

兩種方式的第一步均需要引入這個需要調用的apex

import apexMethodName from '@salesforce/apex/Namespace.Classname.apexMethodReference';

apexMethodName—用來識別引入的apex方法的名稱。這個名稱通常和方法名稱相同並且后期引用均使用此名稱。
apexMethodReference—引用的apex中的method的名稱
Classname—當前的method所在的apex class的名稱
Namespace—當前的namespace，默認為c.如果是c的情況下可以自動省略

比如我們在 ContactController中有一個方法名字是getContactList，則我們的apexMethodName默認應該命名為 getContactList，
apexMethodRefernce為getContactList，Classname為ContactController，Namespace為c。如下所示：
import getContactList from '@salesforce/apex/ContactController.getContactList';

我們在aura項目中，如果js中調用apex中的方法要求當前的方法聲明為@AuraEnabled,同樣使用LWC也要求后台的apex方法需要聲明為@AuraEnabled，並且方法要求static & (public / global)
當我們針對的是獲取數據，沒有DML操作情況下，我們可以聲明方法為cacheable=true去提升客戶端的性能。如果當前的數據存在DML操作，不是純粹的取數據，則不應該聲明cacheable=true。

我們針對和apex交互的兩種方式，使用wire方式必須要指定后台的apex方法聲明 cacheable=true,使用命令方式則不需要有這個限制。當然，如果我們使用了cacheable聲明以后，當我們覺得數據可能不是最新或者是有問題的數據情況下，我們可以調用refreshApex()去獲取最新的數據。

如果我們apex中涉及到和外部系統的長時間的交互，我們可以對方法聲明 continuation=true，如果同時聲明了 cacheable以及continuation，則中間使用空格分隔。如下所示：
@AuraEnabled(continuation=true cacheable=true)

后台方法的要求已經說完了，下面介紹兩種方式的調用。

1）wire方式調用：

@wire(apexMethod, { apexMethodParams })
propertyOrFunction;

apexMethod: 和上面import的apexMethodName相同；
apexMethodParams：apexMethodName傳遞的參數。后台的方法可以無參數和有參數，如果無參數將apexMethodParams設置為null，如果有參數則傳遞此參數。這里需要注意的是，如果apexMethodParams設置為null可以正常調用，意思是無參方法，如果此參數為undefined，則wire不會調用后台的此方法。
propertyOrFunction:wire裝載給變量或者方法。如果是變量，后台方法如果沒有錯誤情況下，返回的是正常的返回內容。否則返回的是error變量。
如果是方法，則方法對應的是一個object，object中包含了data變量或者error變量。說起來比較繞，通過一個例子更好的了解。

下面的例子為wire裝載給方法。wiredContacts返回變量中有兩個參數，error，data。我們通常判斷如果data不為空，則正常返回。如果error不為空，則代表當前的數據獲取存在異常。demo中沒有形參，如果想要有形參，在getContactList方法后面使用逗號分隔以后添加形參

@wire(getContactList)
wiredContacts({ error, data }) {
    if (data) {
        this.contacts = data;
        this.error = undefined;
    } else if (error) {
        this.error = error;
        this.contacts = undefined;
    }
}

下面的例子為wire裝載給變量。findContacts有一個參數searchKey。我們使用$符號代表當前的變量是動態的reactive的，返回值給contacts。如果正常返回，contacts里面是后台的apex 返回的數據列表。如果存在error，contacts里面是error變量。

@wire(findContacts, { searchKey: '$searchKey' })
contacts;

因為后台聲明了cacheable以后，只有刷新以后才能重新裝載最新版本的數據。LWC針對wire聲明的變量提供了refreshApex方法。使用兩步走。

1. import { refreshApex } from '@salesforce/apex';

2. refreshApex(wiredProperty)

其中wiredProperty為我們使用wire標簽聲明的變量。這里需要注意的一點是，針對wire聲明的方法無法使用此方法進行刷新緩存操作。
如果聲明了方法我們想清空緩存，需要先聲明變量。然后方法中對此變量賦值，然后再refreshApex中傳遞聲明的變量。

下面以一個例子更好的了解wire方式調用apex代碼以及refreshApex的使用。

ContactController中聲明了一個方法findContacts，形參是一個string用來傳遞想要搜索的contact的name。此方法使用AuraEnabled並且指定了cacheable=true，則LWC針對前台處理可以使用wire方式，也可以使用命令方式。

public with sharing class ContactController {
    @AuraEnabled(cacheable=true)
    public static List<Contact> findContacts(String searchKey) {
        String key = '%' + searchKey + '%';
        return [SELECT Id, Name, Title, Phone, Email FROM Contact WHERE Name LIKE :key LIMIT 10];
    }
}

 contactListSearchWithWireService.html：展示搜索出來的contact的信息，上面有一個輸入框以及兩個按鈕，點擊search進行搜索，點擊refresh清空緩存重新獲取。

<template>
    <lightning-card icon-name="custom:custom63">
        <div class="slds-m-around_medium">
            <lightning-input type="search" class="slds-m-bottom_small" label="Search" value={searchKey}></lightning-input>
            <lightning-button-group>
                <lightning-button variant="brand" label="search" onclick={handleSearch}></lightning-button>
                <lightning-button variant="brand" label="Refresh" onclick={handleRefresh}></lightning-button>
            </lightning-button-group>
            <template if:true={contacts}>
                <template for:each={contacts} for:item="contact">
                    <p key={contact.Id}>{contact.Name}</p>
                </template>
            </template>
            <template if:true={error}>
                <!-- TODO -->
            </template>
        </div>
    </lightning-card>
</template>

contactListSearchWithWireService.js：這里需要注意的一點是我們使用wire裝載的一個方法名字是wiredContacts，為了后期可以針對方法使用refreshApex，我們設置了storedContacts變量，並且在wire方法中設置了值，針對refreshApex方法我們更新此變量。因為我們在searchKey使用了$符號，標識它是reactive的，變化以后會重新執行方法，所以我們點擊search時只需要賦值searchKey變量便可以達到調用wire方法重新讀取數據的作用了。

import { LightningElement, track,wire } from 'lwc';
import findContacts from '@salesforce/apex/ContactController.findContacts';
import {refreshApex} from '@salesforce/apex'
export default class ContactListSearchWithWireService extends LightningElement {
    @track searchKey;
    @track contacts;
    @track errors;
    storedContacts;

    @wire(findContacts, { searchKey: '$searchKey' })
    wiredContacts(storedContacts) {
        this.storedContacts = storedContacts;
        const {data,error} = storedContacts;
        if(data) {
            this.contacts = data;
            this.errors = undefined;
        } else if(error) {
            this.errors = error;
            this.contacts = undefined;
        }
    }

    handleSearch(event) {
        this.searchKey = this.template.querySelector('lightning-input').value;
    }

    handleRefresh(event) {
        refreshApex(this.storedContacts);
    }
}

 結果展示：

1） 當我們輸入sa yang點擊search 以后會搜索出來sa yang數據，即使后期sa yang這條數據有改掉不符合要求，點擊search還會搜索出來，因為有緩存。

2） 當我們點擊refresh以后，更改過的數據將不再展示在結果區域。

 上面的demo我們使用wire裝載函數以及針對函數情況下使用apexRefresh的方式。下面的demo為使用wire裝載變量並且使用apexRefresh刷新變量緩存的demo。

 contactListSearchWithWireProperty.html：因為我們后台返回的是變量，所以我們針對for:each使用需要property.data方式。

<template>
    <lightning-card icon-name="custom:custom63">
        <div class="slds-m-around_medium">
            <lightning-input type="search" class="slds-m-bottom_small" label="Search" value={searchKey}></lightning-input>
            <lightning-button-group>
                <lightning-button variant="brand" label="search" onclick={handleSearch}></lightning-button>
                <lightning-button variant="brand" label="Refresh" onclick={handleRefresh}></lightning-button>
            </lightning-button-group>
            <template if:true={contacts.data}>
                <template for:each={contacts.data} for:item="contact">
                    <p key={contact.Id}>{contact.Name}</p>
                </template>
            </template>
            <template if:true={conacts.error}>
                <!-- TODO -->
            </template>
        </div>
    </lightning-card>
</template>

ContactListSearchWithWireProperty.js：如果wire裝載的是變量，我們直接在refreshApex方法傳遞此變量即可。

import { LightningElement, track,wire } from 'lwc';
import findContacts from '@salesforce/apex/ContactController.findContacts';
import {refreshApex} from '@salesforce/apex'
export default class ContactListSearchWithWireProperty extends LightningElement {
    @track searchKey;

    @wire(findContacts, { searchKey: '$searchKey' })
    contacts;

    handleSearch(event) {
        this.searchKey = this.template.querySelector('lightning-input').value;
    }

    handleRefresh(event) {
        refreshApex(this.contacts);
    }
}

兩個demo的顯示效果相同，這里不多做展示。

2） 使用命令方式調用后台方法。

我們使用wire方式操作后台的apex通過上面的兩個例子可以很好的理解了，但是使用wire方式有一個大的前置條件，需要后台的方法聲明cacheable=true。

我們針對數據獲取的方法使用wire方式很好，但是針對DML操作的方法不能使用cacheable=true就只能使用我們這種命令方式的訪問后台的方式。

此種方式的固定寫法為：

methodName({ param : parameterObject })
.then(result => {
this.message = result;
this.error = undefined;
})
.catch(error => {
this.message = undefined;
this.error = error;
});

后台的要求區別已經說完了，再說一下前端的區別。使用wire方式返回的是一個stream data，並且參數是reactive的，只要參數改變，就會自動觸發wire。使用上述方式返回的是promise，此種方式只能當次調用有效，如果后期有變化，則需要重新調用。
另外一點為refreshApex只能用在wire裝載的方法和變量，使用此種方式不支持此方法。

參數部分為可選項，如果不傳遞參數則直接methodName()。如果傳遞參數使用{}方式傳遞即可。

我們還是使用上面的例子，只是把JS端改成以命令方式編寫，html端重復內容不再粘貼(需要去掉refresh按鈕)，如下：

import { LightningElement,track } from 'lwc';
import findContacts from '@salesforce/apex/ContactController.findContacts';
export default class ContactListSearchWithImperative extends LightningElement {
    @track searchKey;
    @track contacts;
    @track errors;

    handleSearch() {
        this.searchKey = this.template.querySelector('lightning-input').value;
        findContacts({searchKey:this.searchKey})
            .then(result => {
                this.contacts = result;
                this.errors = undefined;
            })
            .catch(error =>{
                this.errors = error;
                this.contacts = undefined;
            });
    }
}

效果展示同上面相同。

三. Configuration File Tag

我們在創建一個LWC component時，會默認生成一個html / js /meta xml文件，其中meta xml 會指定LWC component很多配置特性，比如當前的LWC component可以引用在哪種類型的lightning page中，api version等配置信息。主要配置項有以下幾點：

apiVersion： 指定LWC component的api version；

description：當前LWC component的描述信息，當顯示在lightning app builder或者community builder的列表中我們鼠標移動到上面會展示此描述信息，此配置項是一個可選項，不必填；

isExposed：用來指定當前的component是否可以暴露給lightning app builder或者community builder使用；此標簽很像aura中針對aura:component的implements的用法；

masterLabel： 用來指定當前的component在lightning app builder或者community builder顯示的名字。默認名字顯示的是定義的component的API name，如果我們想在列表初顯示需要顯示的名字，我們可以設置此字段。和description一樣，這個是可選項，非必填；

 targets：用來指定當前的component在哪里可以添加。當我們指定isExposed為true時，則必須要有targets信息。targets下面有taget子標簽，用來標識當前的component可以加在什么類型的lightning page中。target的可選值如下：

• lightning__AppPage：允許當前的component在lightning app builder使用在app page中；
• lightning__HomePage：允許當前的component在lightning app builder使用在home page中；
• lightning__RecordPage：允許當前的component在lightning app builder使用在record page中；
• lightning__Inbox：允許當前的component在lightning app builder中使用，用於為outlook/gmail集成添加email 應用窗；
• lightningCommunity__Page：允許當前的component在community builder中使用在lightning community page；
• lightningCommunity__Default：和lightningCommunity__Page共同使用。添加此項可以包括可配置的變量當這個component引用的時候；
• lightningSnapin__ChatMessage：允許在Embedded Service Chat Setup中選擇此component。

我們在項目中常用的配置就是lightning__AppPage / lightning__HomePage / lightning__RecordPage了。

 targetConfigs：用來配置不同類型的lightning page和不同的初始化的component 變量。一個lwc component可能有很多的變量聲明，我們針對不同類型的lightning page中需要初始化不同的變量，便可以使用此標簽去實現。和上面的targets一樣，他也是一個父標簽，內容在子標簽targetConfig 聲明。targetConfig有一個屬性叫做targets,我們可以使用此屬性去聲明當前的配置項針對哪個類型的lightning page，針對多個類型的lightning page，我們可以使用逗號','分隔。例如：

<targetConfig targets="lightning__RecordPage,lightning__AppPage">

 targetConfig下可以配置三個子標簽，分別是property / objects / supportedFormFactors,用來給變量進行初始化操作。下面對這三個子標簽分別描述。

 1. Property: 我們在LWC js中會使用@api標簽聲明public變量，使用Property在引用在lightning app builder或者community builder的時候我們可以設置一些初始值以及初始化配置。Property有以下的屬性：

• type：用來聲明變量的類型，比如 Integer/ String / Boolean .
• required：用來標識當前的變量是否必須設置。默認值為false；
• placeholder： 僅用於type為String的情況，用於當輸入框為空的時候在輸入框中展示的提示信息；
• name：我們在js中聲明的變量名稱，兩者必須完全匹配。
• min： 當type為Integer的時候，設置我們想要設置變量的最小值；
• max： 當type為Integer的時候，設置我們想要設置變量的最大值；
• label：在工具中展示attribute的顯示的label 名稱；
• description：在工具中展示attribute的描述信息；
• default：當前attribute的默認值；
• datasource：當type為string情況下需要渲染變量為picklist，則使用此屬性，不同之間的字符串使用逗號','分割。

上述的屬性中，只有name以及type是必填項，其他都是可選項。

2. objects:當我們在target中聲明當前的LWC component在targetConfig中配置了可以引用在lightning record page時，我們可以指定當前的component可以用於哪些objects使用。
同targetConfigs一樣，他也有一個子標簽叫做object用來聲明可以用在哪個object中使用。object標簽不能使用*來聲明可以引用所有objects

 3. supportedFormFactors：我們訪問salesforce可能使用手機或者電腦，我們針對不同的媒介訪問不同的頁面(home page/ record page等)可能需要展示不同的大小，這時我們就需要設置supportedFormFactors了。針對此配置項的配置信息，詳情可以查看https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.use_config_form_factors

總結：篇中主要介紹的是LDS在LWC中的使用方式以及在LDS功能無法滿足情況下，如何使用wire service以及訪問后台方法進行增強。篇中有引入salesforce/ lightning/ui*Api甚至PageReference等信息下篇LWC內容會詳細闡述。篇中有錯誤的地方歡迎指出，有不懂的歡迎留言。