Wie man Laravel -DB -Daten in VUE als globale Variable vorlegt

Wenn Sie eine Anwendung mit Laravel und Vue erstellen, die kein Spa (einseitige Anwendung) ist und mehr als 50 Laravel -Routen haben, werden Sie schnell feststellen, dass Sie eine Art zentraler Speicher benötigen, um die Routen zu verfolgen.

Sie werden wahrscheinlich Axios verwenden, um diese Routen aufzurufen und mit Ihrer Datenbank zu kommunizieren, so.

Ein Vuex -Speicher dafür ist nicht erforderlich, aber Sie können eine globale Variable in Ihre VUE -App -Instanz geladen haben, die für alle Ihre Komponenten zugänglich ist und als Requisite übergeben wird.

Schauen wir uns das an.

Zuerst haben Sie hier ein paar Routen hier als Beispiel:

Route :: post ('/organisationen/lpi', 'organisationController@getlpidata')->
Name ('Get-Organization-LPI-DATA')-> Middleware ('Admin');
Route :: post ('/organisations/lpi/calculate', 'organisationController@calculatelpi')->
Name ('Calculate-Organization-LPI')-> Middleware ('Admin');
Route :: post ('/organisationen/lpi/historisch/get', organisationController@gethistoricallpidata ')->
Name ('Get-Organization-Historical-LPI-Data');
Route :: post ('/organisationen/lpi/statistics/get', organisationController@getlpistatsdata ')->
Name ('get-org-lpi-stats-data')

Stellen Sie sich vor, dies war eine Liste von 100 Routen, und Sie mussten alle in jeder Vue -Komponente im Auge behalten.

Eine Möglichkeit, dies zu tun, besteht darin, es mit PHP so vorzuladen, wie es ist.

So können Sie Requisiten erstellen.PHP -Datei und dort nur eine reguläre Klasse:

Namespace App \ Ihre Domain;
Klassenrequisiten

öffentliche statische Funktion get ()

// falls Sie es gruppieren möchten, können Sie es können
zurückkehren [
'Organisationen' => [
'get_organization_lpi_data' => Route ('Get-Organization-Lpi-Data'),
'calculate_organization_lpi' => Route ('Calculate-Organization-lpi'))
]
];

Dann in Ihrem Haus.Klinge.PHP Sie können diese Datei generieren:

Oben können Sie sehen, dass die Variable $ props gerade dort aufgetaucht ist. Das ist jedoch nicht durch Zufall. Ich hatte eine Hauptkomposer -Klasse eingerichtet, damit sie dies an alle Blattvorlagen übergibt.

Namespace App \ http \ viewComposers;
Klasse MainComposer

geschützt $ excluded_views = [
'E -Mails.ausgeschlossen_blade_template ',
];
/**
* Erstellen Sie einen neuen Profilkomponisten.
*
* @return void
*/
Öffentliche Funktion __construct ()

/**
* Daten an die Ansicht binden.
*
* @param Ansicht $ View
* @return void
*/
Öffentliche Funktion komponieren ($ $ view)

$ props = props :: get ();
Wenn (!$ this-> viewExcluded ($ view-> name ()))
$ view-> mit ('props', $ props);


öffentliche Funktion View excluded ($ name)

foreach ($ this-> ausgeschlossen_views als $ view)
if ($ name == $ view)
zurückkehren;


falsch zurückgeben;

Und schließlich müssen wir dies in Ihrer Haupt -Vue -Instanz laden.

neuer Vue (
EL: '#Main-Home' ',
Daten:
Einstellungen: JSON.analysieren (ATOB (Props_Setings)), // globale Variable
,
.
.
.

Falls Sie eine Vorlage für eine einfache Komponente haben, die in dieser VUE -Instanz lebt, können Sie einfach die Requisite einfügen:

Falls Sie dies noch mehr optimieren möchten, können Sie beispielsweise ein Mixin erstellen, damit es automatisch alle benötigten Requisiten enthält.

Und so übergeben Sie Laravel Resources -Daten in Ihren Vue -Bereich. Sie können auch alle wirklichen Daten in den Requisiten wie Ihren grundlegenden Benutzerdaten vorladen, sodass Sie sie immer im Fliegen haben.

Auch hier könnten wir darüber diskutieren, da dies möglicherweise etwas ist, das Sie mit einem Vuex -Store verwenden könnten, aber es hängt davon ab, wenn Sie es nur als Zustand verwenden möchten oder Sie es mutieren möchten.