Глобальное состояние приложения представляет собой вынесение логики из компонентов в отдельный модуль, подключив его глобально
Установка VueX в терминале IDE приложения
npm install vuex@next --save
Рубрики
Установка Store
Рубрика: JS фреймворки
фреймворки на JavaScript
- Установка Vue3 в Laravel проекте через терминале IDE
установка менеджера пакетов в проекте
npm install
установка последней версии laravel-mix
npm i laravel-mix
установка пакета vue через npm
npm install --save vue@next
npm install --save-dev vue-loader@nextзапуск приложения Vue локально (не использую)
npm run serve- Настройка работы Vue3 в проекте Laravel
в файл webpack.mix.js (находится в корне проекта)
добавить метод vue
...
mix.js('resources/js/app.js', 'public/js').vue()
.postCss('resources/css/app.css', 'public/css', [
//
]);- папка, где хранятся компоненты vue resources\js\components
- файл регистрирует компоненты Vue в Laravel
resources\js\app.js
require('./bootstrap');
import {createApp} from 'vue';
const app=createApp({});
app.mount('#app');- Первый модульный компонент Vue3 в Laravel проекте
resources\js\components\MyTest.vue
<template>
<div>test</div>
</template>- регистрируем компонент Vue в Laravel проекте
resources\js\app.js
require('./bootstrap');
import {createApp} from 'vue';
//главный компонент
import App from 'components/../App.vue';
//компоненты
import comp1 from 'components/comp1.vue';
import comp2 from 'components/comp2.vue';
//создание главного компонента
//и регистрация внутри него других компонентов
const app=createApp(App);
app.component('comp-1',comp1);
app.component('comp-2',comp2);
app.mount('#app');- На шаблоне Laravel проекта
(пример resources\views\index.blade.php)
размещение Vue3 компонента в id=»app» (примере my-test)
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="app"></div>
<script src="./js/app.js"></script>
</body>
</html>- создание роуминга Laravel
для шаблона (пример resources\view\index.blade.php)
как главной страницы
на routes\web.php
...
Route::get('/', function () {
return view('index');
});
...создание функции внутри default
пример data
- Свойство data в компоненте всегда должна быть функцией, которая возвращает объект.
функция data возвращает объект
внутри возвращаемого объекта описываются все поля или модели
Интерполяция
синтаксис
{{Модель}}
- встраивание поля в шаблон и
регистрация поля data в компонент
src\App.vue
<template>
<div>
<div>Кол-во лайков: <strong>{{ likes }}</strong></div>
<div>Кол-во дизлайков: <strong>{{ deslikes }}</strong></div>
</div>
</template>
<script>
export default{
data(){
return {likes: 0,dislikes: 5}
}
}
</script>
<style>
</style>