Creiamo una app con Vue ed Electron - Parte 4
Una sorgente unica di verità: usiamo lo Store con Vuex.
Eccoci al nostro quarto appuntamento, nel precedente Articolo abbiamo creato un form dinamicamente ed esplorato mixins, .sync e validazione.
Volendo ora riutilizzare il componente form in più rotte, così come da programma, la situazione dati incomincia ad essere un po’ ingarbugliata 🤪.
Dovremmo infatti inserire i data nella pagina Palette e poi passarli al FormComponent che a sua volta poi dovrebbe passarli agli input…
Per evitare possibili errori di duplicazione e mantenere la fonte dati in un unico punto facciamo ricorso allo State Management Pattern.
State Management Pattern in cosa consiste?
Lo State singolo è un object nel quale salveremo tutti i dati della nostra applicazione, e dal quale tutti i componenti potranno prelevare i dati.
Per poter implementare questo State utilizzeremo Vuex, plugin ufficiale per lo State Management Pattern di VueJS.
Vi ricordo che stiamo usano Vuejs 2 e di conseguenza Vuex 3.
Store
Abbiamo installato Vuex grazie alla VueCli e abbiamo già in main il relativo import.
Nella cartella store invece avremo il file index.js nel quale è instanziato Store.
Come possiamo vedere lo Store accetta come argomento un object nelle cui proprietà troviamo:
State, Mutation, Action e Modules.
In questo articolo analizzeremo le prime tre.
Partiamo dallo State
Nello State vanno inseriti tutti i dati da condividere con i vari componenti della nostra applicazione inoltre, inseriremo anche alcune costanti che ci serviranno come base di partenza.
Per poter usare lo state il FormComponent deve essere modificato affinché possa ricevere come props i dati necessari per creare gli input e conseguentemente modifichiamo la Home.
Perfetto, ma ora come possiamo recuperare i dati dallo Store?
Richiameremo lo $store in una computed per far sì che il dato sia aggiornato al cambiamento del nostro state.
Questo è un punto importante, se chiamassimo $store direttamente nel data, quel valore verrebbe salvato all’inizializzazione del componente ma non sarebbe reattivo.
Prossimo passo: salvare le modifiche nello state.
È qui che entrano in gioco le mutation e le action che ci consentiranno di inviare i dati allo state.
Cosa sono le Mutation?
Una Mutation è una funzione che accede allo State con lo scopo di modificare un valore.
Seguendo lo State Management Pattern, non possiamo infatti modificare una proprietà dello State direttamente, per evitare di distruggere l’integrita della nostra sorgente della verità.
ATTENZIONE:
Una Mutation è sempre Sincrona.
Per ora utilizzeremo quindi la Mutation direttamente dal nostro FormComponent.
Passiamo al refactoring.
Innanzitutto invece di passare i dati del Form da Home, preleveremo i dati direttamente dallo Store, passando come prop solo il nome della pagina in cui siamo.
In FormComponent quindi aggiungiamo la prop [“page”]
Ora quindi dobbiamo prendere il nostro object Form dallo State.
A questo punto abbiamo i nostri dati e funziona tutto come prima, ma dobbiamo adesso salvare le modifiche degli input value in tempo reale.
Chiameremo a questo scopo ad ogni update un method updateState al quale passiamo la nostra key, che rappresenta l’input, la chiave che ci interessa modificare e chiaramente il suo valore.
Facciamo anche qui un po’ di refactoring, per semplicità passiamo tutti i dati all’input direttamente con un unico v-bind e sostituiamo il .sync con v-on:update per non avere sovrapposizioni.
Come si invoca una mutation?
Utilizzando il metodo commit(‘nomeMutation’, payload)
Il payload può essere un object contenente le nostre informazioni utili a modificare lo store.
Adesso ad ogni modifica sarà inviata una Mutation per valore.
Aggiungiamo un button che diventa attivo solo se i campi sono validati e una computed relativa.
Utiliziamo anche qui una Mutation updateBaseColor
Premiamo Invia ed ecco il risultato!
Abbiamo visto quindi come salvare i dati nello State tramite il commit diretto di una Mutation, questo è stato possibile perché abbiamo un’operazione sincrona.
Se invece avessimo bisogno di effettuare una chiamata asincrona dovremmo obbligatoriamente chiamare una Action.
Action: salvare i dati in maniera asincrona
Le Mutation come abbiamo detto possono salvare solo in maniera sincrona i dati nello state, le Action invece ci consentono l’utilizzo di chiamate asincrone.
Le Action che abbiamo inserito per ora si limitano a chiamare il commit giusto e inviare i dati.
Come si invoca una Action?
Con il metodo dispatch
In questo caso non abbiamo alcuna miglioria nel codice, se non quella di prepararci ad un’eventuale utilizzo di operazioni asincrone.
Simuliamo quindi una chiamata asincrona e restituiamo una Promise
Wrappiamo infine con un tag form, come è giusto che sia.
Modifichiamo InputComponent
Inseriamo l’input submit nello State e aggiungiamo il nuovo tipo Input Submit nel template.
Eliminiamo quindi il nostro submit dal FormComponent.
Aggiungiamo infine una computed che controlli !this.inputsOk || this.inputDisabled; che prima gestivamo direttamente in template.
Abbiamo gettato le basi per l’utilizzo di Vuex.
Per ora ci fermiamo qui, abbiamo visto come aggiungere Vuex e creare delle mutations e actions per gestire la modifica dello Store.
Nel prossimo articolo procederemo con la creazione del componente Wheel e la pagina delle Palettes.
PS: Dai un’occhiata al mio nuovo sito 😎
https://chiarapassaro.medium.com/creiamo-una-app-con-vue-ed-electron-parte-5-4a5e67d0b8e1
