Веб-компоненты Salesforce Lightning (LWC) предоставляют мощную основу для создания современных, адаптивных пользовательских интерфейсов на платформе Salesforce. При работе с данными в LWC вы можете столкнуться со сценариями, когда вам необходимо динамически обновлять данные без перезагрузки всей страницы. В этой статье мы рассмотрим пять способов добиться этого с помощью функции Wire Service в LWC. Мы предоставим примеры кода для каждого метода, чтобы помочь вам реализовать их в своих проектах.
Метод 1: Кнопка обновления вручную
Описание:
Этот метод позволяет пользователям обновлять данные вручную, нажав кнопку. Это идеальный вариант, если вы хотите предоставить пользователям возможность контролировать время обновления данных.
Пример кода:
HTML:
<template>
<lightning-button label="Refresh" onclick={refreshData}></lightning-button>
</template>
JavaScript:
import { LightningElement, wire, track } from 'lwc';
import fetchData from '@salesforce/apex/Controller.fetchData';
export default class MyComponent extends LightningElement {
@track data;
@wire(fetchData)
wiredData({ data, error }) {
if (data) {
this.data = data;
} else if (error) {
// Handle error
}
}
refreshData() {
// Call the wire service again to fetch fresh data
fetchData();
}
}
Метод 2: автоматическое обновление при инициализации
Описание:
Этот метод автоматически обновляет данные при инициализации или визуализации компонента. Это гарантирует актуальность данных при каждой загрузке компонента.
Пример кода:
JavaScript:
import { LightningElement, wire, track } from 'lwc';
import fetchData from '@salesforce/apex/Controller.fetchData';
export default class MyComponent extends LightningElement {
@track data;
@wire(fetchData)
wiredData({ data, error }) {
if (data) {
this.data = data;
} else if (error) {
// Handle error
}
}
connectedCallback() {
// Call the wire service to fetch initial data
fetchData();
}
}
Метод 3: обновление по событию
Описание:
Этот метод обновляет данные при возникновении определенного события, например нажатия кнопки или пользовательского события, запускаемого другим компонентом. Он позволяет вам контролировать, когда данные должны обновляться в зависимости от действий пользователя или других триггеров.
Пример кода:
JavaScript:
import { LightningElement, wire, track } from 'lwc';
import { refreshApex } from '@salesforce/apex';
import fetchData from '@salesforce/apex/Controller.fetchData';
export default class MyComponent extends LightningElement {
@track data;
refreshData = false;
@wire(fetchData)
wiredData({ data, error, refresh }) {
if (data) {
this.data = data;
} else if (error) {
// Handle error
}
if (refresh) {
this.refreshData = false;
refreshApex(this.wiredData);
}
}
handleRefreshClick() {
this.refreshData = true;
}
}
Метод 4: обновление при изменении данных
Описание:
Этот метод автоматически обновляет данные при каждом изменении связанной записи или поля. Это полезно, если вы хотите, чтобы данные оставались синхронизированными с базовой моделью данных.
Пример кода:
JavaScript:
import { LightningElement, wire, track } from 'lwc';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
import FIELD_NAME from '@salesforce/schema/ObjectName.FieldName';
export default class MyComponent extends LightningElement {
@track data;
recordId = 'RecordId';
@wire(getRecord, { recordId: '$recordId', fields: [FIELD_NAME] })
wiredData({ data, error }) {
if (data) {
this.data = getFieldValue(data, FIELD_NAME);
} else if (error) {
// Handle error
}
}
}
Метод 5. Обновление по таймеру
Описание:
Этот метод автоматически обновляет данные через регулярные промежутки времени с помощью таймера. Это удобно, если вы хотите, чтобы данные периодически обновлялись без какого-либо взаимодействия с пользователем.
Пример кода:
JavaScript:
import { LightningElement, wire, track } from 'lwc';
import fetchData from '@salesforce/apex/Controller.fetchData';
export default class MyComponent extends LightningElement {
@track data;
refreshInterval;
connectedCallback() {
this.refreshData();
this.refreshInterval = setInterval(() => {
this.refreshData();
}, 60000); // Refresh every minute
}
disconnectedCallback() {
clearInterval(this.refreshInterval);
}
refreshData() {
// Call the wire service to fetch fresh data
fetchData();
}
}
В этой статье мы рассмотрели пять методов обновления данных в веб-компонентах Salesforce Lightning (LWC) с помощью функции Wire Service. Эти методы обеспечивают гибкость и контроль над тем, когда и как обновляются данные, обеспечивая удобство работы пользователя. Внедрив эти методы в свои проекты LWC, вы сможете поддерживать актуальность данных без необходимости перезагрузки страниц.