Jak wstępnie ładować dane Laravel DB do Vue jako zmienna globalna

Jeśli budujesz aplikację z Laravel i Vue, która nie jest spa (aplikacja jednorazowa) i masz więcej niż 50 tras Laravel, szybko zdasz sobie sprawę, że potrzebujesz jakiegoś centralnego pamięci, aby śledzić trasy.

Prawdopodobnie będziesz używać AXIOS, aby wywołać te trasy i komunikować się z bazą danych, więc naprawdę trudno jest zachować dwa dzienniki tras, jedną ze stron Laravel i innych wewnętrznych komponentów Vue.

Posiadanie sklepu Vuex dla tego nie jest konieczne, ale możesz załadować zmienną globalną do instancji aplikacji Vue, która będzie dostępna dla wszystkich twoich komponentów, przekazanych jako propon.

Spójrzmy na to.

Najpierw masz tutaj kilka tras: przykład:

Trasa :: '/organizacje/lpi', 'organizacjaController@getlpidata')->
nazwa („get-organization-lpi-data”)-> Middleware („admin”);
Trasa :: '/organizacje/lpi/calculate', „organizacjaController@callatelpi ')->
nazwa („Calculate-Norganizacja-LPI”)-> Middleware („admin”);
Trasa :: '/organizacje/LPI/Historical/Get', „OrganizacjaController@gethistoricallpidata ')->
nazwa („Get-Norganizacja-Historyka-lpi-data”);
Trasa :: '/organizacje/LPI/stats/get', 'organizacjaController@getlpistatsData')->
Nazwa („get-org-lpi-stats-data”)

Wyobraź sobie, że była to lista 100 tras i trzeba było śledzić je wszystkie w każdym komponencie Vue.

Jednym ze sposobów na to jest wstępne ładowanie go z php takim, jakim jest.

Dzięki czemu możesz tworzyć rekwizyty.Plik PHP i tam po prostu mają zwykłą klasę:

APPAME APP APP \ Yourdomain;
rekwizyty klasowe

Publiczna funkcja statyczna Get ()

// Jeśli chcesz to grupować, możesz
powrót [
„Organizacje” => [
„get_organization_lpi_data” => trasa („get-organization-lpi-data”),
„Calculate_organization_lpi” => trasa ('Calculate-Norganizacja-lpi')
]
];

Następnie w twoim domu.ostrze.PHP Możesz wygenerować ten plik:

Powyżej widać, że zmienna $ props właśnie się tam pojawiła. To jednak nie jest przez przypadek. Miałem konfigurację klasy Maincomposer, więc przekazuje to do wszystkich szablonów ostrzy.

przestrzeń nazwy app \ http \ viewcomposers;
Kompozytor klas

Protected $ excluded_views = [
„e -maile.excluded_blade_template ',
];
/**
* Utwórz nowy kompozytor profilu.
*
* @return void
*/
funkcja publiczna __Construct ()

/**
* Powiązaj dane z widokiem.
*
* @param widok $ view
* @return void
*/
Funkcja publiczna

$ props = props :: get ();
Jeśli (!$ this-> viewExCluded ($ view-> name ()))
$ view-> z („props”, $ props);


Funkcja publiczna Widok ExcexCluded ($ Nazwa)

foreach ($ this-> excluded_views jako $ view)
if ($ name == $ view)
zwrócić true;


zwrócić fałsz;

I wreszcie musimy załadować to w głównej instancji Vue.

nowy vue (
EL: „#główny dom”,
dane:
Ustawienia: JSON.parse (ATOB (props_settings)), // zmienna globalna
,
.
.
.

Jeśli masz szablon dla prostego komponentu, który żyje w tej instancji vue, możesz po prostu wkleić do niego rekwizyt:

Jeśli chcesz to jeszcze bardziej zoptymalizować, możesz na przykład zrobić miksin, aby automatycznie zawierał wszystkie potrzebne rekwizyty.

I w ten sposób przekazujesz dane dotyczące zasobów laravel do sferę vue. Możesz również wstępnie załadować wszelkie rzeczywiste dane w rekwizytach, jak być może podstawowe dane użytkownika, więc zawsze masz je w locie.

Ponownie możemy o tym debatować, ponieważ może to być coś, czego możesz użyć w sklepie Vuex, ale będzie to zależeć, jeśli będziesz chciał użyć go tylko jako stanu lub chcesz go zmutować.