Strutturazione di un progetto Vue + Vuex

Question

Qui sono un po 'confuso su dove collocare le mie funzioni globali. In molti esempi un file main.js punta a un componente di app e questo è posizionato da qualche parte all'interno dell'html. Questo flusso di lavoro andrebbe bene per me Se dovessi semplicemente contenere tutta la mia logica all'interno di questo componente dell'app. Ma sto combinando componenti con le funzionalità di Laravel, quindi questo non funziona per me.

Attualmente il mio file main.js contiene un sacco di metodi che ho bisogno di avere accesso da qualsiasi punto della mia app. Questi metodi non contengono eventi di trasmissione in modo che possano essere posizionati in modo efficace ovunque finché ottengono un'istanza di risorsa-vue. file di

miei main.js:

https://github.com/stephan-v/BeerQuest/blob/develop/resources/assets/js/main.js

Speriamo che qualcuno mi può dire dove ho potuto mettere i miei metodi di amicizia, se dovessi usare vuex o, in generale, dal momento che questo non sembra delle migliori pratiche a tutti .

Grazie.

Answer 1

Vuex gestisce tutti i dati nell'applicazione. È una "unica fonte di verità" per i dati sul tuo front-end. Pertanto, tutto ciò che cambia lo stato dell'applicazione, ad esempio l'aggiunta di un amico o il rifiuto di un amico, deve scorrere attraverso Vuex. Ciò avviene attraverso tre tipi principali di funzioni, getter, azioni e mutazioni.

Partenza: https://github.com/vuejs/vuex/tree/master/examples/shopping-cart/vuex

Getters sono utilizzati per recuperare i dati dalla memoria in Vuex. Sono reattivi alle modifiche, il che significa che se i dati Vuex cambiano, anche le informazioni nel componente vengono aggiornate. Puoi inserirli in qualcosa come getters.js in modo da poterli importare in qualsiasi modulo in cui ti servono.

Le azioni sono funzioni che chiamate direttamente, es. acceptFriendRequest quando un utente fa clic sul pulsante. Interagiscono con il tuo database e quindi inviano le mutazioni. In questa app, tutte le azioni sono in actions.js.

Così chiamereste this.acceptFriendRequest(recipient) nel vostro componente. Questo direbbe al tuo database di aggiornare lo stato dell'amico, quindi riceverai una conferma che è successo. Questo è quando si invia una mutazione che aggiorna la lista di amici degli utenti correnti all'interno di Vuex.

Una mutazione aggiorna i dati in Vuex per riflettere il nuovo stato. Quando ciò accade, vengono aggiornati anche tutti i dati che si stanno recuperando in un getter. Ecco un esempio di tutto il flusso:

import {addFriend} from './actions.js'; 
import {friends} from './getters.js'; 
new Vue({ 
    vuex:{ 
    getters:{ 
     friends 
    } 
    }, 
    methods:{ 
    addFriend 
    } 
} 

store.js:

export default { 
    state:{ 
    friends: [] 
    }, 
    mutations:{ 
    ADD_FRIEND(state, friend) { 
     state.friends.push(friend); 
    } 
    } 
} 

actions.js:

export default { 
    addFriend(friend){ 
    Vue.http.post('/users/1/friends',friend) 
     .then((response)=>{ 
     dispatch("ADD_FRIEND", response) //response is the new friend 
     }) 
    } 
} 

getters.js

export default { 
    friends(state) { 
    return state.friends; 
    } 
} 

Così tutti di questi sono organizzati in file propri e puoi imp portali in qualsiasi componente di cui hai bisogno. È possibile chiamare this.addFriend(friend) da qualsiasi componente, quindi il proprio getter a cui si accede da this.friends si aggiornerà automaticamente con il nuovo amico quando si verifica la mutazione. Puoi sempre utilizzare gli stessi dati in qualsiasi vista nella tua app e sapere che è aggiornato con il tuo database.

Alcune cose Varie:

• getter ricevono automaticamente state come una variabile, in modo da poter sempre riferimento lo stato del tuo negozio Vuex
• mutazioni non dovrebbero mai essere asincrono. Effettuare il recupero/aggiornamento nelle azioni e quindi inviare le mutazioni solo per aggiornare i dati
• creando servizi (o risorse) utilizzando Vue Resource renderà ancora più facile il recupero/l'aggiornamento/eliminazione delle risorse. è possibile inserirli in file separati e importarli nel proprio actions.js per mantenere separata la logica di recupero del database. Quindi scriverebbe qualcosa come FriendService.get({id: 1}) anziché Vue.http.get('/users/1'). vedi https://github.com/vuejs/vue-resource/blob/master/docs/resource.md
• Vuex funziona con devtools di vue per "viaggiare nel tempo". È possibile visualizzare un elenco di tutte le mutazioni che si sono verificate e riavvolgerle/ripristinarle. È ottimo per eseguire il debug e vedere dove vengono modificati i dati.