5 методов обновления данных в веб-компонентах Salesforce Lightning (LWC) с помощью Wire Service

Веб-компоненты 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, вы сможете поддерживать актуальность данных без необходимости перезагрузки страниц.