Counter in Vue.js

In questa lezione realizzermo l’esercizio Counter utilizzando Vue.js. Il contatore che creermo si incrementerà ogni volta che clicchermo su un pulsante, si decrementerà ogni volta che cliccheremo su un altro pulsante.

Counter in Vue.js utilizzando la Option API

Realizziamo il componente per il nostro contatore dapprima utilizzando la sintassi Option API. Ecco dunque una possibile implementazione:

<template>
    <div id="counter">
        <h2>Contatore!</h2>
        <span>{{ count }}</span>
        <div>
            <button @click="increment">Incrementa</button>
            <button @click="decrement">Decrementa</button>
        </div>
    </div>   
</template>

<script>
export default {
    name: "CounterComponent",
    data() {
        return {
            count: 0
        }
    },
    methods: {
        increment () {
            this.count++;
        },
        decrement() {
            if (this.count > 0) {
                this.count--;
            }
        }
    }
}
</script>


<style scoped>
#counter {
    background-color: lightcoral;
    padding: 30px 0;
}

</style>

Descriviamo il codice necessario per la realizzazione del nostro counter in Vue.js.

Innanzitutto, nel template ho inserito un elemento span che contiene il valore di count e, sotto di esso, ho creato due pulsanti, uno per l’incremento e uno per il decremento del contatore.

Nel blocco <script>, ho definito il componente Vue.js. Il componente ha il nome CounterComponent e ha una proprietà data che restituisce un oggetto con una sola chiave count, inizializzata a 0. Questo rappresenta il valore iniziale del contatore.

Dopo all’interno della sezione methods, ho definito due metodi: increment e decrement. Il metodo increment incrementa il valore di count di uno ogni volta che il pulsante di incremento viene cliccato. Il metodo decrement decrementa il valore di count di uno solo se il valore di count è maggiore di 0, evitando così valori negativi per il contatore.

Infine, nel blocco <style scoped>, ho inserito alcune semplici regole di stile CSS a piacere.

Counter in Vue.js utilizzando la Composition API

Realizziamo adesso lo stesso esempio di contatore, ma utilizzando la sintassi Composition API. Ecco dunque una possibile implementazione:

<template>
  <div id="counter">
    <h2>Contatore!</h2>
    <span>{{ count }}</span>
    <div>
      <button @click="increment">Incrementa</button>
      <button @click="decrement">Decrementa</button>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  name: "CounterComponent",
  setup() {
    // Utilizziamo il metodo 'ref' per creare una variabile reattiva
    const count = ref(0);

    // Definiamo i metodi per incrementare e decrementare il contatore
    const increment = () => {
      count.value++;
    };

    const decrement = () => {
      if (count.value > 0) {
        count.value--;
      }
    };

    // Ritorniamo gli elementi che desideriamo esporre dal setup()
    return {
      count,
      increment,
      decrement
    };
  },
};
</script>

<style scoped>
#counter {
  background-color: lightcoral;
  padding: 30px 0;
}
</style>

In questo codice, stiamo utilizzando la Composition API di Vue.js, che è una nuova e potente modalità di scrivere componenti Vue.

Ecco cosa è cambiato:

Abbiamo sostituito il blocco data con il metodo setup, che è la forma preferita di definire il comportamento dei componenti utilizzando la Composition API. Dopo, all’interno di setup, utilizziamo il metodo ref per creare una variabile reattiva chiamata count, inizializzata a 0.
Quindi abbiamo definito due funzioni increment e decrement all’interno di setup invece di methods. Questo perché la Composition API consente di organizzare il codice in base alla logica e non necessariamente al ciclo di vita del componente.
All’interno di queste funzioni, stiamo manipolando direttamente il valore di count, ottenendo e impostando il suo valore tramite count.value.
Infine, all’interno di setup, ritorniamo gli elementi che desideriamo esporre dal setup utilizzando la sintassi return { count, increment, decrement }. Questo rende count, increment e decrement disponibili all’interno del template.

Conclusioni

In questa lezione, abbiamo esplorato due approcci diversi per implementare un semplice counter in Vue.js: uno utilizzando la sintassi della Option API e dunque le opzioni di data, methods e computed e l’altro utilizzando la Composition API, una nuova modalità introdotta in Vue.js 3 per gestire lo stato e il comportamento dei componenti in modo più chiaro e flessibile.

Entrambi gli approcci ci consentono di creare un contatore funzionale che può essere incrementato e decrementato interattivamente dall’utente. Ma, ci sono alcune differenze tra i due approcci:

Nell’approccio tradizionale, utilizziamo le opzioni standard di Vue.js come data, methods e computed, che sono familiari a chi ha già esperienza con Vue.js. Questo approccio è ancora ampiamente utilizzato e supportato, soprattutto nelle applicazioni esistenti.
Con la Composition API, possiamo organizzare la logica del componente in modo più modulare e riusabile, separando la logica correlata e rendendo più facile comprendere e mantenere il codice. La Composition API è particolarmente utile per gestire componenti complessi con molta logica.

In definitiva, la scelta tra i due approcci dipende dalle esigenze specifiche del progetto e dalle preferenze personali dello sviluppatore. Entrambi offrono modi validi per creare componenti Vue.js reattivi e funzionali.

>> Composition API

Direttiva v-if >>