尽管LDS实现了很多和数据的交互操作,但是通过LDS仍然有主要的三个点无法灵活满足:

  1. 当逻辑需要很复杂场景,比如DML以前需要复杂的逻辑校验或者关联字段交互;
  2. LDS只支持部分标准表,不在user interface api支持的表无法使用
  3. LDS基于 user mode,即如果当前的user对某个字段没有编辑权限,无法进行编辑。如果没有查看权限,通过 getRecord也无法查出来。

所以针对后台交互,apex方式在实际项目中还是会经常用到,salesforce针对lwc提供了两种方式进行后台交互: wire注解以及声明式。

一. wire注解方式

使用wire注解方式,前提条件需要保证apex class类需要使用 @AuraEnabled(cacheable=true),即要求缓存方式。如果方法不满足上述要求,则运行时报错。

我们先以一个wire方式的demo展开。

ContactController.cls

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

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

import { LightningElement, track,wire } from 'lwc';
import findContacts from '@salesforce/apex/ContactController.findContacts';
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;
    }
}

结果显示

Untitled

我们通过上述代码分析一下 wire方式的关键内容以及注意点。