Comment précharger les données de DB Laravel dans Vue en tant que variable globale

Si vous construisez une application avec Laravel et Vue qui n'est pas un spa (application à une page) et que vous avez plus de 50 itinéraires Laravel, vous vous rendrez rapidement compte que vous avez besoin d'une sorte de stockage central pour garder une trace des itinéraires.

Vous utiliserez probablement Axios pour appeler ces itinéraires et communiquer avec votre base de données afin qu'il devienne vraiment difficile de conserver deux journaux d'itinéraires, l'un du côté Laravel et les autres composants à l'intérieur de Vue.

Avoir une boutique Vuex pour cela n'est pas nécessaire, mais ce que vous pouvez faire, c'est d'avoir une variable globale chargée dans votre instance d'application Vue qui sera accessible à tous vos composants, passé comme un accessoire.

Jetons un coup d'œil à ça.

Vous avez d'abord quelques itinéraires ici comme exemple:

Route :: Post ('/ Organizations / LPI', 'OrganisationController @ getlpidata') ->
name ('get-organisation-lpi-data') -> middleware ('admin');
Route :: Post ('/ Organizations / LPI / Calcul', 'OrganisationController @ Calculatelpi') ->
name ('calculer-organisation-lpi') -> middleware ('admin');
Route :: Post ('/ Organizations / LPI / Historical / Get', 'OrganizationController @ GethistoricallPidata') ->
Nom («Get-Organisation-Historical-lpi-data»);
Route :: Post ('/ Organizations / Lpi / Stats / Get', 'OrganisationController @ getlpistatsdata') ->
name ('get-org-lpi-stats-data')

Imaginez que c'était une liste de 100 itinéraires et vous deviez garder une trace de tous dans chaque composant Vue.

Une façon de le faire est de le précharger avec PHP comme il est.

Afin que vous puissiez créer un accessoire.Fichier PHP et il y a juste une classe régulière:

application d'espace de noms \ yourDomain;
accessoires de classe

fonction statique publique get ()

// au cas où vous voudriez le regrouper, vous pouvez
retour [
'organisations' => [
'get_organisation_lpi_data' => itinéraire ('get-organisation-lpi-data'),
'calculer_organisation_lpi' => route ('calculer-organisation-lpi')
]]
]]

Puis dans votre maison.lame.PHP Vous pouvez générer ce fichier:

Ci-dessus, vous pouvez voir que la variable $ access. Ce n'est pas par accident. J'avais une classe Maincomposer configurée pour qu'elle passe cela à tous les modèles de lame.

Namespace App \ http \ ViewComposers;
classe Maincomposer

protégé $ exclud_views = [
'Emails.exclud_blade_template ',
]]
/ **
* Créer un nouveau compositeur de profil.
*
* @return void
* /
fonction publique __construct ()

/ **
* Location des données à la vue.
*
* @param View $ View
* @return void
* /
Fonction publique Compose (View $ View)

$ props = accessoires :: get ();
si (!$ this-> ViewExclud ($ View-> name ()))
$ View-> avec ('accessoires', $ accessoires);


Fonction publique ViewExcluded ($ nom)

foreach ($ this-> exclud_views en tant que $ View)
if ($ name == $ View)
Retour Vrai;


retourne false;

Et enfin ce que nous devons faire, c'est charger ceci dans votre instance Vue principale.

Nouveau Vue (
El: '# Main-Home',
données:
Paramètres: JSON.parse (atoB (props_settings)), // variable globale
,
.
.
.

Dans le cas où vous avez un modèle pour un composant simple qui vit dans cette instance VUe, vous pouvez simplement coller l'hélice:

Dans le cas où vous souhaitez optimiser encore plus, vous pouvez faire un mélange par exemple afin qu'il comprenne automatiquement tous les accessoires nécessaires.

Et c'est ainsi que vous transmettez les données Laravel Resources dans votre royaume Vue. Vous pouvez également précharger toutes les données réelles à l'intérieur des accessoires comme peut-être vos données utilisateur de base afin que vous les ayez toujours à la volée.

Encore une fois, nous pourrions débattre à ce sujet, car cela pourrait être quelque chose que vous pourriez utiliser avec un magasin Vuex, mais cela dépendra si vous voudrez l'utiliser comme un état uniquement ou si vous voulez le muter.