Los métodos Getter y Setter en Lightning Web Component son excelentes herramientas para modificar datos. Podemos utilizarlos si necesitamos ejecutar una determinada lógica al momento de recibir un valor de una propiedad publica.
¿Cuándo utilizamos Getter o Setter en Salesforce?
En Salesforce, podemos utilizar estos métodos cuando un componente de Lightning Web Component recibe datos.
Si necesitamos ejecutar una determinada lógica cada vez que recibimos el valor de una propiedad, podemos usar un setter. Así mismo, en caso necesitemos cambiar el formato de una propiedad en un componente, podemos usar un getter.
Si escribimos un setter para una propiedad pública en Lightning Web Component, también debemos escribir un getter. El getter o el setter pueden llevar el decorator @api, pero no ambos. Además, es una buena práctica poner el decorator @api en el método getter.
¿Cómo Definimos un Getter en Lightning Web Component?
Definimos un getter en Lightning Web Component utilizando la palabra reservada get.
get itemName() { ... }
Ademas, podemos mostrar un getter en una plantilla de Lightning Web Component de la misma forma que mostramos una propiedad.
{itemName}
¿Cómo Definimos un Setter en Lightning Web Component?
Definimos un setter en Lightning Web Component utilizando la palabra reservada set.
set itemName(value) { ... }
¿Cuándo se Ejecuta un Getter en Lightning Web Component?
Un método getter en Lightning Web Component se ejecuta dentro del ciclo de vida de un componente donde es definido. Esto ocurre:
- Cuando accedemos a un getter en una plantilla de Lightning Web Component.
- Cuando hacemos referencia de un getter en un método o propiedad dentro de la clase Javascript de un componente en Lightning Web Component.
En el siguiente ejemplo, mostraremos los nombres y apellidos de una persona, pero su apellido estará en letras mayusculas.
<template>
<span>Mi nombre es {personData.Name}.</span>
<span>Mi apellido es {personData.LastName}.</span>
</template>
En la clase Javascript, usaremos el método Setter para obtener el apellido de la persona y convertir dicho valor en mayúscula.
import { LightningElement } from 'lwc';
export default class FullNameComponent extends LightningElement {
personData;
@api
get person(){
return this.personData;
}
set person(value){
let tempPerson = {
...value,
LastName: value.LastName.toUpperCase(),
};
this.personData = tempPerson;
}
}
Más Información
- Use Getters and Setters to Modify data
- Undertand Getter in Lightning Web Component
- LWC Getters and Setters
Para saber más sobre Salesforce, puedes visitar nuestro post sobre El Framework para Pruebas de Salesforce.