Una SPA (Single Page Application) con Vue.js e Vuex

La creazione di un'applicazione a pagina singola (SPA) è una delle soluzioni più efficaci per costruire esperienze utente veloci e interattive. Con l'uso di tecnologie moderne come Vue.js è possibile sviluppare applicazioni altamente performanti e facili da gestire. Vue.js è un framework JavaScript progressivo che semplifica la creazione di UI dinamiche. In questo tutorial, esploreremo come creare una SPA utilizzando Vue.js e Vuex, una libreria per la gestione dello stato.

Perché Vue.js e Vuex?

Vue.js è noto per la sua curva di apprendimento relativamente bassa, ma anche per la sua potenza e flessibilità. Vuex, d'altro canto, è una libreria di gestione dello stato per Vue.js, che consente di centralizzare i dati dell'applicazione e di garantire una gestione semplice ed efficiente dello stato a livello globale.

Vue.js consente di creare componenti reattivi che si aggiornano automaticamente quando i dati cambiano. Tuttavia, man mano che l'applicazione cresce, può diventare difficile gestire lo stato di tutti i componenti. Qui entra in gioco Vuex, che offre un meccanismo di gestione centralizzata in modo che l'intera applicazione possa condividere e aggiornare lo stato in maniera coerente.

Struttura di una SPA

Un'applicazione a pagina singola carica dinamicamente contenuti senza ricaricare l'intera pagina. Questo permette di migliorare l'esperienza utente, rendendo l'applicazione molto più veloce rispetto alle tradizionali web app che ricaricano la pagina ad ogni interazione.

In una SPA, l'utente interagisce con i vari componenti dell'applicazione che sono disponibili una sola volta durante il caricamento iniziale. Solo i dati vengono aggiornati tramite chiamate API, riducendo drasticamente il tempo di caricamento e migliorando la reattività dell'app.

Creare un'applicazione Vue.js

Iniziamo creando una semplice SPA con Vue.js e Vuex. La prima cosa da fare è assicurarsi di avere Node.js e npm installati. Puoi scaricarli dal sito ufficiale di Node.js.

Installare Vue CLI

Vue CLI è uno strumento che semplifica la creazione di progetti Vue.js. Per installarlo, apri il terminale e digita il comando:

npm install -g @vue/cli

Una volta installato, puoi creare un nuovo progetto Vue.js con il comando:

vue create my-vue-spa

Durante la creazione del progetto, ti verrà chiesto di selezionare alcune opzioni per configurare il progetto. Puoi scegliere il preset predefinito che include tutte le configurazioni di base necessarie per un'applicazione Vue.js.

Aggiungere Vuex per la gestione dello stato in Vue.js

Vuex è il modulo ufficiale per la gestione dello stato in Vue.js. Per aggiungerlo al tuo progetto, esegui il comando:

vue add vuex

Questo comando installa Vuex e aggiunge la configurazione necessaria al progetto. Fatto questo dovrai creare uno store Vuex per gestire lo stato globale dell'applicazione.

Creare il layout dell'applicazione

Per il nostro esempio, creiamo una SPA di base per la gestione di una lista di attività (To-Do list). Iniziamo con il file principale App.vue. Qui definiremo il layout dell'applicazione.

<template>
  <div id="app">
    <h1>Lista delle Attività</h1>
    <TodoList />
    <AddTodo />
  </div>
</template>
<script>
import TodoList from './components/TodoList.vue';
import AddTodo from './components/AddTodo.vue';
export default {
  name: 'App',
  components: {
    TodoList,
    AddTodo
  }
}
</script>
<style>
/* Stili globali */
</style>

In questo esempio, abbiamo definito una struttura di base con due componenti: TodoList per visualizzare la lista di attività e AddTodo per aggiungere nuove attività.

Il file TodoList.vue

Di seguito il codice del file TodoList.vue:

<template>
  <div>
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        {{ todo.text }}
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'TodoList',
  computed: {
    todos() {
      return this.$store.state.todos;
    }
  }
}
</script>

Il componente TodoList è responsabile della visualizzazione delle attività. Utilizziamo una computed property per ottenere le attività dallo stato globale che è gestito da Vuex.

Il file AddTodo.vue

Ecco invece il codice del file AddTodo.vue:

<template>
  <div>
    <input
      v-model="newTodo"
      @keyup.enter="addTodo"
      placeholder="Aggiungi una nuova attività"
    />
  </div>
</template>
<script>
export default {
  name: 'AddTodo',
  data() {
    return {
      newTodo: ''
    };
  },
  methods: {
    addTodo() {
      if (this.newTodo.trim()) {
        this.$store.commit('addTodo', { id: Date.now(), text: this.newTodo });
        this.newTodo = '';
      }
    }
  }
}
</script>

Nel componente AddTodo abbiamo un campo di input per aggiungere nuove attività. Quando l'utente preme Invio la nuova attività viene aggiunta allo stato globale tramite una mutazione Vuex.

Gestire lo Stato con Vuex

Ora, passiamo alla parte più importante: gestire lo stato dell'applicazione con Vuex. Per farlo, dobbiamo definire uno store che contiene lo stato e le mutazioni per aggiornarlo.
Ecco quindi il codice del file  store/index.js:

<script>
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
  state: {
    todos: []
  },
  mutations: {
    addTodo(state, todo) {
      state.todos.push(todo);
    }
  },
  actions: {},
  modules: {}
});
</script>

In questo store Vuex, abbiamo definito lo stato todos che è un array di oggetti attività. Abbiamo anche una mutazione addTodo che aggiunge una nuova attività all'array todos.

Conclusioni

Abbiamo appena creato una SPA di base con Vue.js e Vuex. Grazie a Vuex, possiamo gestire facilmente lo stato globale dell'applicazione mantenendo il codice pulito e scalabile. Vue.js si occupa della parte visiva e della reattività, mentre Vuex centralizza e gestisce lo stato semplificando l'interazione tra i componenti.

Questa è solo una base di partenza. Puoi estendere l'applicazione aggiungendo funzionalità come la rimozione di attività, il salvataggio dei dati nel local storage, l'integrazione con un backend o l'implementazione di filtri per le attività. Con Vue.js e Vuex, hai tutti gli strumenti necessari per creare applicazioni web interattive e moderne.