В Laravel можно объявить глобальные переменные из базы данных для использования их в Vue.js. Для этого требуется выполнить несколько шагов.
1. Создайте модель для работы с таблицей в базе данных. Допустим, у нас есть таблица "settings" с колонками "key" и "value".
namespace AppModels; use IlluminateDatabaseEloquentModel; class Setting extends Model { protected $fillable = ['key', 'value']; }
2. Создайте контроллер, который будет обрабатывать запросы и возвращать данные из базы данных.
namespace AppHttpControllers; use IlluminateHttpRequest; use AppModelsSetting; class SettingController extends Controller { public function index() { $settings = Setting::all(); return response()->json($settings); } }
3. Создайте маршрут для контроллера в файле routes/web.php
.
use AppHttpControllersSettingController; Route::get('/settings', [SettingController::class, 'index']);
4. В компоненте Vue.js, в котором вы хотите использовать глобальные переменные из базы данных, выполните AJAX-запрос для получения данных.
export default { data() { return { settings: null }; }, mounted() { axios.get('/settings') .then(response => { this.settings = response.data; }); } }
5. В HTML-разметке вашего компонента вы можете использовать полученные из базы данных значения.
<template> <div> <div v-for="setting in settings" :key="setting.id"> <div>{{ setting.key }}</div> <div>{{ setting.value }}</div> </div> </div> </template>
Теперь, когда вы загружаете страницу, компонент Vue.js выполнит AJAX-запрос на сервер Laravel, получит данные из базы данных и отобразит их на странице. Вы можете использовать переменные settings
в вашем компоненте Vue.js по своему усмотрению.