Come cambia Vuex con l’introduzione di Vue 3

In questa breve lezione conclusiva illustreremo rapidamente i cambiamenti introdotti nella nuova versione di Vuex che è la 4.x ed è compatibile con Vue 3. Vogliamo sottolineare che, in modo simile a ciò che accade per Vue Router, Vuex 4.x è compatibile con Vue 3 mentre Vuex 3.x è compatibile con Vue 2. Nei prossimi paragrafi non ci addentreremo nei dettagli di Vuex e non vedremo degli esempi completi visto che abbiamo già affrontato ampiamente l’argomento nelle lezioni passate.

Novità introdotte in Vuex v4.x, versione compatibile con Vue 3

Cominciamo subito dicendo che le novità introdotte nella nuova versione di Vuex sono minime e riguardano principalmente il modo in cui viene creato un nuovo ‘store’ e la diversa procedura per installarlo all’interno di un’applicazione. Avendo già visto le modifiche introdotte in Vue Router 4, risulterà sicuramente familiare quanto andremo ad illustrare.

Il team di sviluppo di Vue ha infatti cercato di rendere più simile, omogeneo ed intuitivo il processo da seguire per aggiungere ulteriori funzionalità all’istanza base di un’applicazione. E per farlo non dobbiamo dimenticarci di avere sempre a disposizione Vue CLI che consente di automatizzare un processo ripetitivo come quello dell’inizializzazione di un nuovo progetto.

Come creare uno ‘Store’ in Vuex 4.x

Affidiamoci quindi a Vue CLI per creare una nuova applicazione con Vue Router e Vuex ed andiamo poi ad esaminare alcuni dei file per scoprire in che modo viene creato un nuovo store in Vuex 4.x.

Spostiamoci allora in una nuova cartella e lanciamo il comando vue create vuex-demo e selezioniamo manualmente le funzionalità da aggiungere.

Selezioniamo Vue 3 come versione del framework e le altre opzioni in modo da ottenere una configurazione come quella riportata sotto.

Prima di proseguire, ricordiamo che in Vue 2 veniva generata una cartella src/store in cui era presente un file index.js come quello mostrato sotto.

// Codice del file src/store/index.js 
// per creare uno store in Vuex 3 per un'applicazione in Vue 2
import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

const storeConfig = {
  state: {
    // codice per state
  },
  mutations: {
    // codice per mutations
  },
  actions: {
    // codice per actions
  },
  modules: {
    // codice per modules
  },
};

export default new Vuex.Store(storeConfig);

Nel frammento di codice riportato sopra viene prima installata Vuex tramite il metodo Vue.use(), creiamo successivamente un oggetto di configurazione per lo store che già conosciamo avendolo più volte incontrato negli esempi delle scorse lezioni.

Tale oggetto viene poi passato come argomento per generare una nuova istanza attraverso new Vuex.Store(storeConfig). Questa viene esportata ed usata in src/main.js come opzione dell’oggetto di configurazione dell’istanza base di Vue.

// file src/main.js in un'applicazione che 
// fa uso di Vue 2.x e Vuex 3.x
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

Vue.config.productionTip = false;

new Vue({
  router,
  store, // installa Vuex Store
  render: h => h(App)
}).$mount("#app");

Al contrario, in Vue 3 non creeremo più uno store con new Vuex.Store(), ma è stata introdotta una nuova funzione createStore alla quale passeremo lo stesso oggetto di configurazione dello ‘store’ che resta invariato. Dunque, avremo sempre un oggetto con una proprietà state, delle mutazioni, delle azioni per eseguire operazioni asincrone ed invocare le mutazioni, un oggetto di getters per ricavare dei dati derivati dalle proprietà base di state ed un eventuale oggetto per meglio organizzare lo store in moduli.

// file: src/store/index.js
import { createStore } from "vuex";

const storeConfig = {
  state: {
    // codice per state
  },
  mutations: {
    // codice per mutations
  },
  actions: {
    // codice per actions
  },
  getters: {
    // codice per getters
  },
  modules: {
    // codice per modules
  },
};

export default createStore(storeConfig);

Lo store creato dalla funzione createStore dovrà essere poi installato nell’istanza base dell’applicazione e per farlo useremo il metodo Vue.use.

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

createApp(App)
  .use(store) // installa lo store di Vuex nell'applicazione
  .use(router)
  .mount("#app");

Sono queste le due differenze radicali rispetto alla precedente versione di Vuex, per il resto valgono le stesse considerazioni già viste nelle lezioni passate a cui vi rimando per maggiori dettagli ed esempi completi su come usare Vuex.

La nuova funzione useStore per la composition API

Concludiamo questa lezione dicendo che in Vuex 4.x viene introdotta anche una nuova API per accedere ad uno store Vuex all’interno del metodo setup di un componente che fa uso della Composition API.

<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>

<script>
import { useStore } from 'vuex';

export default {
  setup() {
    const store = useStore();

    console.log(store)
    
    // resto del codice del metodo setup()
  }
}
</script>

Si tratta della funzione useStore che importiamo dalla libreria Vuex e consente di avere accesso a tutte le proprietà e i metodi per accedere alle informazioni dello store ed eseguire delle operazioni di modifica di quest’ultimo.