Lightning Web Component 和 Salesforce 数据操作示例

使用 Salesforce 数据的途径

在 Lightning Web Component 中使用 Salesforce 数据有以下几种途径：

• 使用 lightning-record-form 系列预定义组件，直接读取和操作数据
• 使用 @wire 注解来绑定数据

上面两者都使用了 Lightning Data Service 来缓存数据，提高组件的运行效率。如果数据有了更改，也会在组件中及时更新数据。

lightning-record-form 示例

lightning-record-form 是预定义的组件，可以绑定到某一条记录。

它有几种模式，通过 mode 属性来定义：

• view：显示数据，具有 inline 的编辑功能
• edit：直接显示数据编辑界面
• readonly：只能显示数据，无法编辑

代码示例：

HTML 文件：

JavaScript 文件：

@api accountId;

注意：如果不提供 record-id 属性值，则它会自动变为新建记录的界面。

也可以在 JavaScript 文件中引用对象和字段的定义，比如：

HTML 文件：

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 相关预定义组件

lightning-record-view-form 组件和 lightning-output-field 组件结合可以显示记录信息，比如：

lightning-record-edit-form 组件和 lightning-input-field 等组件结合可以编辑记录信息，比如：

@wire 注解示例

下面的示例将使用 @wire 来绑定 Apex 函数，进行 Account 的查询。

这里假设我们已经有了一个 Apex 类 AccountController，其中有函数 getAccounts()，接收一个字符串并返回 Account 列表信息。

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

HTML 文件：

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;
    }
}