Come precaricare i dati DB di Laravel in Vue come variabile globale

Se stai creando un'applicazione con Laravel e Vue che non è una spa (applicazione a pagina singola) e hai più di 50 percorsi di Laravel, ti renderai presto conto di aver bisogno di un qualche tipo di archiviazione centrale per tenere traccia delle rotte.

Probabilmente utilizzerai Axios per chiamare questi percorsi e comunicare al tuo database in modo che diventi davvero difficile mantenere due registri di percorsi, uno del lato Laravel e l'altro all'interno dei componenti Vue.

Avere un negozio VUEX per questo non è necessario, ma quello che puoi fare è avere una variabile globale caricata nell'istanza dell'app Vue che sarà accessibile a tutti i tuoi componenti, superata come prop.

Diamo un'occhiata a questo.

Per prima cosa hai qualche percorso qui come esempio:

Route :: Post ('/Organizations/LPI', 'OrganizationController@getlpidata')->
name ('get-organization-lpi-data')-> middleware ('admin');
Route :: Post ('/Organizations/LPI/Calculate', 'OrganizationController@calcolatelpi')->
name ('Calco-Organization-lpi')-> Middleware ('Admin');
Route :: Post ('/Organizations/LPI/Historical/Get', 'OrganizationController@gethistoricallpidata')->
nome ("get-organizzation-storical-LPI-data");
Route :: Post ('/Organizations/LPI/Stats/Get', 'OrganizationController@getlpistatsdata')->
Nome ("Get-Org-LPi-stats-Data")

Immagina che questo fosse un elenco di 100 percorsi e dovevi tenerne traccia di tutti all'interno di ogni componente Vue.

Un modo per farlo è quello di precaricarlo con PHP così com'è.

Quindi puoi creare un oggetto di scena.File PHP e dentro hanno solo una classe normale:

appspace app \ yourdomain;
oggetti di scena di classe

funzione statica pubblica get ()

// nel caso in cui tu voglia raggrupparlo, puoi
ritorno [
'Organizzazioni' => [
'get_organization_lpi_data' => route ('get-organization-lpi-data'),
'Calculate_organization_lpi' => route ('Calcola-Organization-LPI')
"
];

Poi a casa tua.lama.PHP puoi generare questo file:

Sopra, puoi vedere che la variabile $ oggetti è appena presentata lì dentro. Non è per caso però. Avevo una classe di compositore mainposer, quindi passa a tutti i modelli di lama.

appspace app \ http \ viewcomposer;
compositore principale di classe

protetto $ escluso_views = [
"Email.escluso_blade_template ',
];
/**
* Crea un nuovo compositore di profili.
*
* @return void
*/
funzione pubblica __construct ()

/**
* Lega i dati alla vista.
*
* @param Visualizza $ Visualizza
* @return void
*/
compositura della funzione pubblica (Visualizza $ Visualizza)

$ PROPS = Props :: get ();
Se (!$ this-> ViewExcluded ($ View-> name ())
$ view-> with ("oggetti di scena", $ oggetti di scena);


Funzione pubblica Visualizza esclusa ($ Nome)

foreach ($ this-> escluso_views come $ view)
if ($ name == $ view)
restituire vero;


restituire false;

E infine quello che dobbiamo fare è caricarlo all'interno della tua principale istanza Vue.

new vue (
EL: '#Main-Home',
dati:
Impostazioni: JSON.Parse (ATOB (props_settings)), // variabile globale
,
.
.
.

Nel caso in cui tu abbia un modello per un semplice componente che vive in questa istanza Vue, puoi semplicemente incollare l'elica:

Nel caso in cui desideri ottimizzarlo ancora di più, puoi fare un mixin, ad esempio, quindi include automaticamente tutti gli oggetti di scena necessari.

Ed è così che passi i dati delle risorse di Laravel nel tuo regno Vue. Puoi anche precaricare eventuali dati reali all'interno degli oggetti di scena come forse i dati dell'utente di base in modo da avere sempre al volo.

Ancora una volta, potremmo discutere su questo poiché questo potrebbe essere qualcosa che potresti usare con un negozio VUEX, ma dipenderà se vorrai usarlo solo come stato o vuoi mutarlo.