尽管LDS实现了很多和数据的交互操作,但是通过LDS仍然有主要的三个点无法灵活满足:
所以针对后台交互,apex方式在实际项目中还是会经常用到,salesforce针对lwc提供了两种方式进行后台交互: 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;
}
}
结果显示
我们通过上述代码分析一下 wire方式的关键内容以及注意点。
apexMethodName和第二步骤的from前面的别名保持一致
如果方法需要传递参数,通过花括号引入,后台apex的参数名称是什么,这里就一定要写什么,大小写保持一致,比如demo中:{ searchKey: '$searchKey' }
demo中我们看到参数传递使用 ‘$变量名称’,这种写法目的是当这个变量改变以后,系统会自动调用这个wire方法重新渲染,实际项目中也需要使用此种方式,更灵活方便
propertyOrFunction作为方法返回结果的引用,可以直接返回变量,也可以返回方法。如果返回的是变量,则变量包含data和error两个属性。如果返回的是方法,则返回一个object包含data和error,实际项目中推荐使用返回函数类型,更方便后期扩展。
wire方法无法应用于方法内,只能写在方法同层。系统自动调用