LWC勉強ーデコレーター@api、@track、@wire(003)

@api公開プロパティはリアクティブです。公開プロパティの値が変更されると、コンポーネントは再表示されます。公開プロパティを公開するには、項目を @api でデコレートします。公開プロパティではコンポーネントの API を定義します。（Public）

公開メソッドを公開するには、公開メソッドを @api でデコレートします。公開メソッドはコンポーネントの API の一部です。コンテインメント階層の下位と通信するには、所有者と親コンポーネントは子コンポーネントで JavaScript メソッドをコールできます。

@track項目はリアクティブです。項目の値が変更され、その項目がテンプレートで使用されているか、テンプレートで使用されているプロパティの getter で使用されている場合、コンポーネントは再表示され、新しい値を表示します。（Private）

@track の使用事例が 1 つあります。項目にオブジェクトまたは配列が含まれる場合、追跡される変更の深度には制限があります。オブジェクトのプロパティまたは配列の要素の変更を監視するようにフレームワークに指示するには、項目を @track でデコレートします。

@wireLightning Web コンポーネントでは、リアクティブなワイヤサービスを使用して Salesforce データを読み取ります。ワイヤサービスがデータをプロビジョニングすると、コンポーネントによって表示されます。コンポーネントは、その JavaScript クラスの @wire を使用して、ワイヤアダプタまたは Apex メソッドを指定します。

写真はウェブから

①@api

app.html


<template>

Hello, {name}

</template>

app.js


import { LightningElement, api } from 'lwc';

export default class Example extends LightningElement {

@api name = 'world!';

}

@api name = ‘world!’;⇒@api name = ‘zchao博客之家!’;

nameが変わる場合、app.htmlの{name}も更新されること。

二つのコンポーネント

<!– bike.html –>



<template>

<imgsrc={bikepro.picture} alt="bike picture"/>

<p>{bikepro.name}</p>

</template>



// bike.js

import { LightningElement, api } from 'lwc';

export default class Bike extends LightningElement {

@api bikepro;

}

<!– app.html –>



<template>

<div>

<c-bike   bikepro={bikeinfo}></c-bike>

</div>

</template>


// app.js

import { LightningElement } from 'lwc';

export default class App extends LightningElement {

bikeinfo = {

name: 'Electra X4',

picture: 'https://s3-us-west-1.amazonaws.com/sfdc-demo/ebikes/electrax4.jpg'

};

}

<c-bike bikepro={bikeinfo}></c-bike>

コンポーネントAppはコンポーネントbikeを利用可能、@api bikepro;のため、もし@tracki bikepro;の場合、できません。

②@track

app.html



 <template>
    <lightning-card title="HelloExpressions" icon-name="custom:custom1">
        <div class="slds-m-around_medium">
            <lightning-input
                name="firstName"
                label="First Name"
                onchange={handleChange}
            ></lightning-input>
            <lightning-input
                name="lastName"
                label="Last Name"
                onchange={handleChange}
            ></lightning-input>
            <p class="slds-m-top_medium">
                Uppercased Full Name: {uppercasedFullName}
            </p>
        </div>
    </lightning-card>
</template>

app.js


import { LightningElement,track } from 'lwc';

export default class App extends LightningElement {

@track firstName = '';

@track lastName = '';

handleChange(event) {

const field = event.target.name;

if (field === 'firstName') {

this.firstName = event.target.value;

} else if (field === 'lastName') {

this.lastName = event.target.value;

}

}

get uppercasedFullName() {

return`${this.firstName}${this.lastName}`.trim().toUpperCase();

}

}

<lightning-input>

https://developer.salesforce.com/docs/component-library/bundle/lightning:input/example#lightningcomponentdemo:exampleInputDate

定義：

@track firstName = ”;
@track lastName = ”;
handleChange(event)：自動メソッドを呼び出
get uppercasedFullName()：getメソッドを呼び出
getが無かったら、どうなっているのか？

③@wire

VSCodeでリリースしよう！

wireFunction.html


<template>

<lightning-card title="My Contact Record" icon-name="standard:contact">

<template if:true={contact.data}>

<div class="slds-m-around_medium">

<p>{name}</p>

<p>{title}</p>

<p><lightning-formatted-phone value={phone}></lightning-formatted-phone></p>

<p><lightning-formatted-email value={email}></lightning-formatted-email></p>

</div>

</template>

<template if:true={contact.error}>

<c-error-panel errors={contact.error}></c-error-panel>

</template>

</lightning-card>

</template>

wireFunction.js


import { LightningElement, api, wire } from 'lwc';

import { getRecord } from 'lightning/uiRecordApi';

const FIELDS = [

'Contact.Name',

'Contact.Title',

'Contact.Phone',

'Contact.Email',

];

export default class WireFunction extends LightningElement {

@api recordId;

@wire(getRecord, { recordId: '0032v00002xiU72AAE', fields: FIELDS })

contact;

get name() {

return this.contact.data.fields.Name.value;

}

get title() {

return this.contact.data.fields.Title.value;

}

get phone() {

return this.contact.data.fields.Phone.value;

}

get email() {

return this.contact.data.fields.Email.value;

}

}

wireFunction.js-meta.xml


<?xml version="1.0" encoding="UTF-8" ?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

<apiVersion>48.0</apiVersion>

<isExposed>true</isExposed>

<masterLabel>WireFruction</masterLabel>

<targets>

<target>lightning__AppPage</target>

<target>lightning__RecordPage</target>

<target>lightning__HomePage</target>

<target>lightningCommunity__Page</target>

</targets>

<targetConfigs>

<targetConfig targets="lightning__RecordPage">

<objects>

<object>Product2</object>

</objects>

</targetConfig>

</targetConfigs>

</LightningComponentBundle>

errorPanel.html


<template>

<div> {errors} </div>
</template>

errorPanel.js


import { LightningElement,api } from 'lwc';

export default class ErrorPanel extends LightningElement {

@api errors;

}

自分の環境にリリースします。

SFDX: Authorize an Org

SFDX: Deploy Source to Org

Edit Pageに配置しておきます。

@wire(getRecord, { recordId: ‘0032v00002xiU72AAE’, fields: FIELDS })
contact;recordId: ‘0032v00002xiU72AAE’,
このrecordIdは実際環境のContactのIdです。

Apex メソッドのコール

ContactController


public with sharing class ContactController {

@AuraEnabled(cacheable=true)

public static List<Contact> getContactList() {

return [

SELECT Id, Name, Title, Phone, Email

FROM Contact

LIMIT 10

];

}

}

メソッドの結果のキャッシュ

実行時のパフォーマンスを改善するには、@AuraEnabled(cacheable=true) を設定してクライアントにメソッドの結果をキャッシュします。cacheable=true を設定するには、メソッドがデータの取得のみを行う必要があります。メソッドでデータを変更することはできません。

apexWireMethodToProperty.html


<!-- apexWireMethodToProperty.html -->

<template>

<lightning-card title="ApexWireMethodToProperty" icon-name="custom:custom63">

<div class="slds-m-around_medium">

<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={contacts.error}>

<c-error-panel errors={contacts.error}></c-error-panel>

</template>

</div>

</lightning-card>

</template>

apexWireMethodToProperty.js


// apexWireMethodToProperty.js

import { LightningElement, wire } from 'lwc';

import getContactList from '@salesforce/apex/ContactController.getContactList';

export default class ApexWireMethodToProperty extends LightningElement {

@wire(getContactList) contacts;

}