使用 Salesforce 數(shù)據(jù)的途徑

在 Lightning Web Component 中使用 Salesforce 數(shù)據(jù)有以下幾種途徑：

• 使用 lightning-record-form 系列預(yù)定義組件泛范，直接讀取和操作數(shù)據(jù)
• 使用 @wire 注解來綁定數(shù)據(jù)

上面兩者都使用了 Lightning Data Service 來緩存數(shù)據(jù)，提高組件的運(yùn)行效率窗慎。如果數(shù)據(jù)有了更改，也會在組件中及時更新數(shù)據(jù)僚碎。

lightning-record-form 示例

lightning-record-form 是預(yù)定義的組件挟憔，可以綁定到某一條記錄。

它有幾種模式墩朦，通過 mode 屬性來定義：

• view：顯示數(shù)據(jù)坯认，具有 inline 的編輯功能
• edit：直接顯示數(shù)據(jù)編輯界面
• readonly：只能顯示數(shù)據(jù)，無法編輯

代碼示例：

HTML 文件：

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

JavaScript 文件：

@api accountId;

注意：如果不提供 record-id 屬性值氓涣，則它會自動變?yōu)樾陆ㄓ涗浀慕缑妗?/p>

也可以在 JavaScript 文件中引用對象和字段的定義牛哺，比如：

HTML 文件：

<template>
    <lightning-record-form
        record-id={accountId}
        object-api-name={objectApiName}
        fields={fields}
        mode="view">
    </lightning-record-form>
</template> 

JavaScript 文件：

import { LightningElement } from 'lwc';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
import NAME_FIELD from '@salesforce/schema/Account.Name';
import PHONE_FIELD from '@salesforce/schema/Account.Phone';

export default class exampleCmp extends LightningElement {
    accountId = 'xxxxxx';

    objectApiName = ACCOUNT_OBJECT;

    fields = [NAME_FIELD, PHONE_FIELD];
}

使用 field 相關(guān)預(yù)定義組件

lightning-record-view-form 組件和 lightning-output-field 組件結(jié)合可以顯示記錄信息，比如：

<lightning-record-view-form record-id={accountId} object-api-name="Account">
    <lightning-output-field field-name="Name"></lightning-output-field>
    <lightning-output-field field-name="Phone"></lightning-output-field>
</lightning-record-view-form>

lightning-record-edit-form 組件和 lightning-input-field 等組件結(jié)合可以編輯記錄信息劳吠，比如：

<lightning-record-edit-form record-id={accountId} object-api-name="Account">
    <lightning-input-field field-name="Name"></lightning-input-field>
    <lightning-button type="submit" label="Save"></lightning-button>
</lightning-record-edit-form>

@wire 注解示例

下面的示例將使用 @wire 來綁定 Apex 函數(shù)引润，進(jìn)行 Account 的查詢。

這里假設(shè)我們已經(jīng)有了一個 Apex 類 AccountController痒玩，其中有函數(shù) getAccounts()淳附，接收一個字符串并返回 Account 列表信息议慰。

public with sharing class AccountController {
    // 必須要有 @AuraEnabled(cacheable=true) 注解
    @AuraEnabled(cacheable=true)
    public static List<Account> getAccounts(String searchText) {
        return [SELECT Id, Name, Phone FROM Account WHERE Name LIKE :searchText + '%' LIMIT 10];
    }
}

HTML 文件：

<template>
    <lightning-input label="Search" value={searchText} onchange={handleSearch}></lightning-input>

    <template if:true={records.data}>
        <template for:each={records.data} for:item="account">
            <lightning-layout-item key={account.Id} class="slds-p-around_x-small">
                <lightning-card title={account.Name} icon-name="action:record">
                    <div class="slds-m-around_medium">
                        <lightning-record-form record-id={account.Id} object-api-name={objectApiName}
                            fields={fieldsToDisplay} mode="view">
                        </lightning-record-form>
                    </div>
                </lightning-card>
            </lightning-layout-item>
        </template>
    </template>
</template>

JavaScript 文件：

import { LightningElement, wire, api } from 'lwc';
import getAccounts from '@salesforce/apex/AccountController.getAccounts';

export default class AccountListLwc extends LightningElement {
    @api searchText;

    objectApiName = 'Account';
    fieldsToDisplay = ['Name', 'Phone'];

    // 在 HTML 文件中使用 records.data 來得到 Account 列表
    @wire(getAccounts, { searchText: '$searchText' }) 
    records;

    handleSearch(event) {
        this.searchText = event.target.value;
    }
}