Tutorial Vuex per principianti

Blog

Tutorial Vuex per principianti

Vuex è la libreria ufficiale di gestione dello stato per le applicazioni Vue.



In questo tutorial, partiamo dal presupposto che tu non abbia una precedente esperienza di lavoro con Vuex.

Iniziamo con questo tutorial, quindi cos'è Vuex?



Vuex è un'implementazione Vue del modello di gestione dello stato Flux. È una libreria per lavorare con i dati nelle tue applicazioni Vue.

Vuex è la libreria ufficiale di gestione dello stato per Vue.js



Vuex consente agli sviluppatori di rendere la gestione dei dati complessi più semplice ed efficiente utilizzando un archivio dati globale a cui è possibile accedere da tutti i componenti dell'applicazione Vue per ottenere o impostare i dati.

Vuex ti consente di condividere in modo efficiente i dati tra i componenti dell'applicazione.

migliore libreria di moduli di reazione

I componenti Vue possono utilizzare diversi modi per comunicare i dati tra loro, ad esempio:

  • oggetti di scena : gli oggetti di scena vengono utilizzati per passare lo stato da un componente padre ai suoi figli,
  • eventi : gli eventi vengono utilizzati per modificare lo stato di un componente dai suoi figli.

Props ed eventi possono essere sufficienti per scenari semplici, ma una volta che i requisiti dei dati per la tua applicazione diventano complessi, dovrai implementare altre strategie o modelli avanzati.

nexus ci/cd

Tra questi modelli c'è il modello Flux che mira a centralizzare lo stato in un'applicazione. In un'applicazione Vue, puoi implementare questo modello usando Vuex.

Un'altra implementazione popolare del pattern Flux è Redux, che è più popolare tra gli sviluppatori di React. Ma Redux è indipendente dal framework, il che significa che puoi usarlo anche con Vue.

Detto questo, Vuex è l'opzione migliore in Vue perché offre una migliore integrazione poiché è la libreria ufficiale per la gestione dello stato in Vue.

Prerequisiti

Per poter partecipare a questo tutorial, devi avere alcuni requisiti come:

  • Un ambiente di sviluppo pronto con Node.js 8.9+ e NPM installati,
  • Una conoscenza di base del JavaScript moderno,
  • Un'esperienza lavorativa di Vue.js.

Questo è tutto ciò di cui hai bisogno. Installerai gli altri requisiti durante questo tutorial.

Installazione della CLI Vue.js v3

In questo tutorial, utilizzeremo l'ultima versione della CLI Vue.js per generare un nuovo progetto Vue, quindi per prima cosa iniziamo installando la CLI.

Torna al tuo terminale ed esegui il seguente comando:

$ npm install @vue/cli -g

Poiché stai installando la CLI a livello globale sul tuo sistema, assicurati di disporre delle autorizzazioni necessarie configurando la configurazione di npm o semplicemente usa sudo prima di eseguire il comando.

Creazione di un nuovo progetto Vue.js

Dopo aver installato Vue CLI, usiamolo per generare un nuovo progetto eseguendo il seguente comando nel tuo terminale:

$ vue create vuex-demo

Questo genererà un |_+_| progetto nella directory corrente.

La CLI chiederà un preset che verrà utilizzato per il tuo progetto. Puoi anche scegliere manualmente le funzionalità necessarie per il tuo progetto da una serie di plugin ufficiali come Babel, Dattiloscritto , IL PESO , Vue Router e Vuex.

Quindi vai avanti e seleziona manualmente Babel, Vue Router e Vuex per il tuo progetto.

La CLI ti chiederà anche alcune altre opzioni per la configurazione del router come |_+_| e |_+_|. Puoi anche scegliere se vuoi salvare o meno il preset.

Per assicurarti che tutto funzioni come previsto, naviga all'interno della cartella del tuo progetto:

mongodb regno vs firebase
vuex-demo

Quindi esegui il server di sviluppo usando:

router history

Dovresti essere in grado di andare al |_+_| indirizzo per vedere l'applicazione in esecuzione:

Tutorial Vuex per principianti

Ecco fatto, ora sei pronto per iniziare a imparare Vuex implementando una semplice applicazione che ne gestisce lo stato utilizzando un archivio centrale.

Creazione dei componenti

Ora che abbiamo creato il nostro progetto, creiamo i componenti della nostra applicazione.

Sotto |_+_| cartella, crea due |_+_| e |_+_| File:

dedicated config files

Quindi apri il |_+_| file e aggiungi un collegamento a |_+_| componente:

num_workers pytorch
$ cd vuex-demo

Quindi apri il |_+_| e aggiungi una nuova rotta al file |_+_| componente:

$ npm run serve

Per ora, aggiungi il seguente modello all'interno di |_+_| file:

localhost;8080

Per ora è tutto sui componenti.

ci/cd gcp

Le basi di Vuex

Prima di continuare a creare la nostra applicazione Vue, comprendiamo innanzitutto le basi di Vuex.

Cos'è un Vuex Store?

Un negozio Vuex è un oggetto centrale per l'archiviazione dei dati nell'applicazione Vue. Fornisce inoltre diversi metodi per accedere e modificare lo stato globale.

Questo è un esempio di un negozio di base:

src/components

Usiamo il |_+_| metodo per creare un negozio. Assume diverse proprietà, come:

  • |_+_|; questo oggetto contiene lo stato effettivo dell'applicazione, ovvero eventuali variabili e array, ecc.
  • |_+_|: questo oggetto contiene i metodi che verranno utilizzati per mutare lo stato,
  • |_+_|: questo oggetto contiene metodi che chiamano i metodi di mutazione.

mutazioni

Le mutazioni sono funzioni che consentono di mutare e aggiornare lo stato in un negozio Vuex. Queste funzioni non possono essere chiamate direttamente ma devono invece essere confermate usando |_+_| del negozio Vuex.

Le mutazioni sono funzioni sincrone.

Azioni

Le azioni sono funzioni che possono essere utilizzate per eseguire le mutazioni.

Le azioni possono eseguire operazioni asincrone.

Conclusione

In questa prima parte del tutorial di Vuex, abbiamo installato la CLI Vue e l'abbiamo usata per creare una demo Vue che verrà utilizzata per dimostrare i diversi concetti di Vuex.

Abbiamo anche visto concetti di base come il negozio Vuex, lo stato, le mutazioni e le azioni.

# vue-js #javascript