Cómo precargar los datos de Laravel DB en Vue como variable global

Si está creando una aplicación con Laravel y Vue que no es un spa (aplicación de una sola página) y tiene más de 50 rutas de Laravel, se dará cuenta rápidamente de que necesita algún tipo de almacenamiento central para realizar un seguimiento de las rutas.

Probablemente usará Axios para llamar a estas rutas y comunicarse a su base de datos para que sea realmente difícil mantener dos registros de rutas, uno de los componentes de Laravel y el otro interior.

No es necesario tener una tienda Vuex para esto, pero lo que puede hacer es tener una variable global cargada en su instancia de aplicación Vue que sea accesible para todos sus componentes, aprobados como un accesorio.

Echemos un vistazo a esto.

Primero tienes algunas rutas aquí como ejemplo:

Ruta :: post ('/organizaciones/lpi', 'organización controller@getlpidata')->
nombre ('Get-Organization-LPI-Data')-> Middleware ('Admin');
Ruta :: post ('/organizaciones/lpi/calculación', 'organización controller@calculatelpi')->
nombre ('Calculación-Organización-LPI')-> Middleware ('Admin');
Ruta :: post ('/organizaciones/lpi/histórica/get', 'organización controller@gethistoricallpidata')->
nombre ('Get-Organization-Historical-LPI-Data');
Ruta :: post ('/organizaciones/lpi/stats/get', 'organizationController@getlpistatsData')->
Nombre ('Get-Org-Lpi-Stats-Data')

Imagine que esta era una lista de 100 rutas y debía realizar un seguimiento de todas ellas dentro de cada componente Vue.

Una forma de hacerlo es precargarlo con PHP como es.

Para que puedas crear un accesorio.archivo php y solo tiene una clase regular:

Aplicación de espacio de nombres \ YourDomain;
accesorios de clase

función estática pública get ()

// en caso de que desee agruparlo, puede
devolver [
'organizaciones' => [
'get_organization_lpi_data' => ruta ('get-organización-lpi-data'),
'calculate_organization_lpi' => ruta ('calculación-organización-lpi')
]
];

Entonces en tu casa.cuchilla.PHP Puede generar este archivo:

Arriba, puede ver que la variable $ Props acaba de aparecer allí. Aunque eso no es por accidente. Tuve una clase de MainComposer configurada, así que pasa esto a todas las plantillas de cuchilla.

APLICACIÓN DEL PAGO DE NAME \ HTTP \ VIEWCOMPOSERS;
clase MainComposer

protegido $ excluido_views = [
'correos electrónicos.excluido_blade_template ',
];
/**
* Crear un nuevo compositor de perfil.
*
* @return void
*/
función pública __construct ()

/**
* Vincular datos a la vista.
*
* @param Ver $ Ver
* @return void
*/
composición de la función pública (Ver $ View)

$ props = props :: get ();
si (!$ this-> ViewExCluded ($ View-> name ()))
$ View-> con ('Props', $ Props);


Función pública ViewExCluded ($ nombre)

foreach ($ this-> excluido_views como $ ver)
if ($ name == $ ver)
devolver verdadero;


falso retorno;

Y finalmente lo que debemos hacer es cargar esto dentro de su instancia principal de Vue.

nuevo vue (
El: '#HOME MAIN PRINCIPAL',
datos:
Configuración: JSON.Parse (ATOB (Props_Settings)), // Variable global
,
.
.
.

En caso de que tenga una plantilla para un componente simple que vive en esta instancia de Vue, entonces puede pegar el accesorio:

En caso de que desee optimizar esto aún más, puede hacer una mezcla, por ejemplo, para que automáticamente incluya todos los accesorios necesarios.

Y así es como pasa los datos de recursos de Laravel a su reino VUE. También puede precargar cualquier datos reales dentro de los accesorios como tal vez sus datos básicos de usuario para que siempre lo tenga en la marcha.

Una vez más, podríamos debatir sobre esto, ya que esto podría ser algo que podría usar con una tienda Vuex, pero dependerá si desea usarlo solo como un estado o desea mutarlo.