Hvordan du forhindrer Laravel DB -data til Vue som global variabel

Hvis du bygger en applikasjon med Laravel og Vue som ikke er et spa (enkelt sidesapplikasjon) og du har mer enn 50 Laravel -ruter, vil du raskt innse at du trenger en slags sentral lagring for å holde rede på rutene.

Du vil sannsynligvis bruke Axios for å ringe disse rutene og kommunisere til databasen din, slik at det blir veldig vanskelig å holde to logger med ruter, en av Laravel -siden og den andre i Vue -komponentene.

Å ha en Vuex -butikk for dette er ikke nødvendig, men det du kan gjøre er å ha en global variabel lastet inn i Vue -appforekomsten din som vil være tilgjengelig for alle komponentene dine, bestått som en rekvisitt.

La oss se på dette.

Først har du noen få ruter her som et eksempel:

Rute :: Post ('/Organisasjoner/LPI', 'OrganizationController@getlpidata')->
Navn ('Get-Organization-LPI-Data')-> Middleware ('Admin');
Rute :: post ('/organisasjoner/lpi/beregning', 'OrganizationController@calculatelpi')->
Navn ('Calbulate-Organization-LPI')-> Middleware ('Admin');
Rute :: Post ('/Organisasjoner/LPI/Historical/Get', 'OrganizationController@gethistoricallpidata')->
Navn ('Get-Organization-Historical-LPI-Data');
Rute :: Post ('/Organisasjoner/LPI/Statistikk/Get', 'OrganizationController@getlpistatsData')->
Navn ('Get-Org-Lpi-Stats-Data')

Se for deg at dette var en liste over 100 ruter, og du trengte å holde rede på dem alle inne i hver vue -komponent.

En måte å gjøre dette på er å forhåndsleste det med PHP slik det er.

Så du kan lage en rekvisitter.PHP -fil og der inne har du bare en vanlig klasse:

namespace -app \ Yourdomain;
klasse rekvisitter

offentlig statisk funksjon Get ()

// I tilfelle du vil gruppere det, kan du
komme tilbake [
'Organisasjoner' => [
'get_organization_lpi_data' => rute ('get-organization-lpi-data'),
'Calculate_organization_lpi' => rute ('Calculate-Organization-LPI')
]
];

Så hjemme hos deg.blad.PHP Du kan generere denne filen:

Over kan du se at variabelen på $ rekvisitter nettopp dukket opp der inne. Det er ikke ved et uhell. Jeg hadde en hovedkomposerklasse satt opp, så den overfører dette til alle bladmalene.

namespace app \ http \ viewcomposers;
Klasse MainComposer

beskyttet $ ekskludert_views = [
'E -post.Ekskludert_blade_template ',
];
/**
* Opprett en ny profilkomponist.
*
* @return void
*/
offentlig funksjon __konstruksjon ()

/**
* Bind data til visningen.
*
* @Param Vis $ Vis
* @return void
*/
Offentlig funksjonskomponering (Vis $ Vis)

$ rekvisitter = rekvisitter :: get ();
hvis (!$ this-> viewexcluded ($ view-> name ()))
$ view-> med ('rekvisitter', $ rekvisitter);


Offentlig funksjon ViewExcluded ($ navn)

foreach ($ this-> ekskluderte_views as $ view)
if ($ name == $ view)
return True;


return falsk;

Og til slutt det vi trenger å gjøre er å laste dette inn i din viktigste vue -forekomst.

Ny vue (
EL: '#Main-Home',
data:
Innstillinger: JSON.parse (atob (props_settings)), // global variabel
,
.
.
.

I tilfelle du har en mal for en enkel komponent som lever i denne vue -forekomsten, kan du bare lime inn rekvisitt til den:

I tilfelle du vil optimalisere dette enda mer, kan du for eksempel lage en mixin, slik at den automatisk inkluderer alle rekvisitter som trengs.

Og det er slik du gir Laravel Resources -data inn i Vue Realm. Du kan også forhåndsinnlaster alle reelle data i rekvisittene som kanskje de grunnleggende brukerdataene dine, slik at du alltid har dem på farten.

Igjen kan vi diskutere dette siden dette kan være noe du kan bruke med en Vuex -butikk, men det vil avhenge om du bare vil bruke det som en stat, eller du vil mutere den.