Como pré -carregar dados de db de Laravel em vue como variável global

Se você estiver construindo um aplicativo com Laravel e Vue, isso não é um spa (aplicativo de página única) e você tem mais de 50 rotas de Laravel, você perceberá rapidamente que precisa de algum tipo de armazenamento central para acompanhar as rotas.

Você provavelmente estará usando axios para chamar essas rotas e se comunicar com o seu banco de dados, para que se torne realmente difícil manter dois toras de rotas, um dos lados de Laravel e outro dentro dos componentes do Vue.

Ter uma loja Vuex para isso não é necessária, mas o que você pode fazer é ter uma variável global carregada em sua instância de aplicativo Vue que será acessível a todos os seus componentes, passados ​​como um suporte.

Vamos dar uma olhada nisso.

Primeiro você tem algumas rotas aqui como exemplo:

Route :: Post ('/Organizações/LPI', 'OrganizationController@getlpidata')->
Nome ('Get-Organization-LPI-Data')-> Middleware ('Admin');
Route :: Post ('/Organizações/LPI/Calcule', 'OrganizationController@calculatelpi')->
nome ('calcular-organização-lpi')-> middleware ('admin');
Route :: Post ('/Organizações/LPI/Histórica/Get', 'OrganizationController@Gethistoricallpidata')->
nome ('Get-organização-histórico-lpi-data');
Route :: Post ('/Organizações/LPI/STATS/GET', 'OrganizationController@getlpistatsdata')->
nome ('get-org-lpi-stats-data')

Imagine que essa foi uma lista de 100 rotas e você precisava acompanhar todas elas dentro de cada componente Vue.

Uma maneira de fazer isso é pré -carregá -lo com o PHP da maneira como é.

Então você pode criar um adereço.arquivo php e lá só tem uma aula regular:

namespace app \ yourDomain;
adereços de classe

Função estática pública Get ()

// Caso você queira agrupá -lo, você pode
retornar [
'Organizações' => [
'get_organization_lpi_data' => rota ('get-organization-lpi-data'),
'Calcular_organization_lpi' => rota ('calcular-organização-lpi')
]
];

Então em sua casa.lâmina.PHP Você pode gerar este arquivo:

Acima, você pode ver que a variável $ props acabou de aparecer lá. Isso não é por acidente embora. Eu tinha uma classe de Maiorcomposer configurada para que ela passasse para todos os modelos de lâmina.

namespace app \ http \ viewcomposers;
Classe MaiComposer

$ protegido excluded_views = [
'E -mails.excluído_blade_template ',
];
/**
* Crie um novo compositor de perfil.
*
* @return void
*/
Função pública __construct ()

/**
* Vincular dados à visualização.
*
* @param View $ View
* @return void
*/
Função pública compor (visualizar $ visualizar)

$ props = props :: get ();
se (!$ this-> ViewExcluded ($ View-> Name ()))
$ VIEJA-> com ('adereços', $ props);


Função pública ViewExcluded ($ Name)

foreach ($ this-> excluded_views como $ view)
if ($ name == $ view)
retornar true;


retorna falso;

E finalmente o que precisamos fazer é carregar isso dentro de sua instância principal.

novo Vue (
el: '#main-home',
dados:
Configurações: JSON.parse (atob (props_settings)), // variável global
,
.
.
.

Caso você tenha um modelo para um componente simples que vive nesta instância de vue, você pode apenas colar o suporte:

Caso você queira otimizar ainda mais isso, você pode fazer um mixin, por exemplo, para incluir automaticamente todos os adereços necessários.

E é assim que você passa dados de recursos do Laravel para o seu reino vue. Você também pode pré -carregar todos os dados reais dentro dos adereços, como talvez os dados básicos do usuário, para que você sempre os tenha em tempo real.

Novamente, poderíamos debater sobre isso, pois isso pode ser algo que você poderia usar com uma loja Vuex, mas dependerá se você quiser usá -lo apenas como um estado ou você deseja mudar isso.