4. États dérivés
Libérée, dérivée...
Nous savons donc créer un état et le manipuler. Mais il est parfois nécessaire de créer des variables qui dépendent d'un état pour, par exemple, afficher des informations complémentaires.
La rune $derived
Pour créer une variable réactive dérivant d'une autre variable réactive, il faut utiliser la rune
$derived, en lui fournissant une expression dépendant d'une autre variable.
La nouvelle variable ainsi créée fonctionne de la même manière qu'un état.
<script>
let money = $state(100);
const moneyInYens = $derived(money * 171);
</script>
<button onclick={() => money++}> Gagner de l'argent </button>
<p>{money} € ({moneyInYens} ¥)</p>Vous pouvez également réassigner une variable dérivée, si vous choisissez de la déclarer avec
let, ce qui peut être nécessaire dans certaines situations.
Il est aussi possible de dériver de plusieurs variables à la fois.
<script>
let checking = $state(100);
let savings = $state(100);
const total = $derived(checking + savings);
</script>
<button onclick={() => checking++}>Travailler</button>
<button onclick={() => savings++}>Économiser</button>
<p>Compte courant : {checking} €</p>
<p>Économies : {savings} €</p>
<p>Total : {total} €</p>Vous pouvez dériver de variables réactives dérivées.
L'expression utilisée dans
$derivedne doit pas contenir d'effets de bord, notamment la mise à jour d'autres$state.
Déstructurer
L'usage de $derived permet notamment d'extraire les champs d'un objet.
<script>
const name = $derived(data.name);
const familyName = $derived(data.familyName);
const address = $derived(data.address);
</script>Toutefois, un usage dérivé :p de la rune $derived permet de déstructurer simplement les variables
réactives pour simplifier l'écriture du code.
<script>
const { name, familyName, address } = $derived(data);
</script>Dans le cas où le calcul dérivé est trop complexe (par exemple s'il nécessite plusieurs étapes), vous pouvez utiliser la rune
$derived.by, qui prend une fonction en argument.