Рубрика: CMF

Content Management Framework
каркас
фреймворк управления содержимым
для проектирования систем управления контентом
фреймворки

Vue hook

Использование Hook в компоненте Vue

Автор записи Автор: bo52
Дата записи 16.04.2022

Создание Hook файла по структуре
hooks\ИмяХука.js

//импортирование модификатора по созданию переменных
//и/или лайвсак методы 
//в хук функции
import {ref,onMounted,onCreated,computed,watch} from 'vue';
export function ИмяХука(Стат.Параметры){
//тело функции хука
//lat ИмяПеременной=ref(Значение) 
//реактивные переменные, где 
//изменение переменной через value
//использование лайвсак методы
//onMounted(параметр);
//onCreated(параметр);
//computed(параметр);
//watch(параметр);
//return {ИмяПеременной,...};
}

Вызываем хук в компоненте в script и template

<template>
<div v-model="ИмяПеременной"></div>
</template>

<script>
export default{
setup(props){
  //объект возвращает хук
  const {ИмяПеременной,...} = ИмяХука(Параметр);
  ....
  return {ИмяПеременной,...};
}
}
</script>

Метки Vue.js

Vue store

Модульность Store

Автор записи Автор: bo52
Дата записи 14.04.2022

создание модуля store
resources\Store\dir\ИМЯ_МОДУЛЯ.js

export const ИМЯ_МОДУЛЯ = {
 state:()=>({
  //переменная: Значение,
 }),
 getters: {
  //функция_считает(state,getters){...return}
 },
 mutations: {
  //функция(state,параметры){...}
 },
 actions: {
  //функция({state,commit,}){...}
 }
}

регистрация store модуля в главном store модуле
resources\Store.js

import {createStore} from "vuex";
import {имя_модуля} from "./store/dir/имя_модуля";

export default createStore(
...
  modules:{
    ...
    ИМЯ_МОДУЛЯ:имя_модуля
  }
})

обращение к объекту из модуля
в компоненте в секции template

{{ $store.Секция.ИМЯ_МОДУЛЯ.ИмяВСекции}}

Метки Vue.js

Vue store

Создание главного Store

Автор записи Автор: bo52
Дата записи 14.04.2022

создание главного файла
resources\store.js

import {createStore} from "vuex";
export default createStore({
state:{
//переменные в состоянии
test:0,//пример числовой целой переменной
},
getters:{
//функции для вычисления
},
mutations:{
//функции изменяют переменные данного модуля
},
actions:{
//функции обращаются к секциям модуля и привязанным модулям
},
modules:{
//модули, которые привязываются к данному модулю
},
});

регистрация созданного главного файла в приложении
resources\js\app.js

require('./bootstrap');
import {createApp} from 'vue';
//главный компонент
import App from '../App.vue';
import store from '../store.js';
...
//создание главного компонента и регистрация внутри других компонентов
const app=createApp(App);
app.use(store);
...
app.mount('#app');

вызов в главном store из секции данных
в главном компоненте проекта

в теге {{$store.state.test}}
в скрипте this.$store.state.test

<template>
<div>
<div> {{$store.state.test}} </div>
<map-wrap/>
<map-load/>
<a @click="test">Click me!</a>
</div>
</template>

<script>
export default {
    components:{
        map_load,
        map_wrap
    },
  data: () => ({
    map:null,
    polygons:{},
  }),
methods:{
  test:function(){
    alert(this.$store.state.test);
  }
},

}
</script>

Метки Vue.js

Vue store

Установка Store

Автор записи Автор: bo52
Дата записи 14.04.2022

Глобальное состояние приложения представляет собой вынесение логики из компонентов в отдельный модуль, подключив его глобально

Установка VueX в терминале IDE приложения

npm install vuex@next --save

Vue.js

Метки Vue.js

Laravel

Настройки в шаблоне Laravel проекта

Автор записи Автор: bo52
Дата записи 12.04.2022

Первый модульный компонент 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 MyTest from './components/MyTest.vue';

const app=createApp({});
app.component('my-test',MyTest);

app.mount('#app');

На шаблоне Laravel проекта
(пример resources\views\index.blade.php)
размещение Vue3 компонента в атрибуте id тега (примере my-test)

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
    <div id="app">
    <my-test/>
    </div>

    <script src="./js/app.js"></script>
    </body> 
</html>

создание роуминга Laravel
для шаблона (пример resources\view\index.blade.php)
как главной страницы
на routes\web.php

...
Route::get('/', function () {
    return view('index');
});
...

Метки Laravel