Рубрики
Vue Mixins Vue компонент Vue3 логика

Структура Mixins в Vue

  • Структура примеси файла
    mixins/ИмяМексина.js
export default {
 props:{prop1},
 data(){},
 methods:{},
 computed:{},
 watch:{},
...
}
  • Использование примеси в компоненте
    На примере обращение к пропсу prop1
<template>
{{prop1}}
</template>
<script>
import ИмяМексина from './mixins/ИмяМексина';
export default {
 mixins:[ИмяМексина],
}
</script>
Mixins во Vue.js
Vue.js
Рубрики
Composition Api Vue декомпозиция Vue3 логика

Composition API (setup) в компоненте

setup
функция принимает параметры props

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

Всё что мы вернём функции setup будет доступно в шаблоне компонента <template>

<template>
<div>{{myvar}}</div>
</template>
<script>
import {ref} from 'vue'
export default {
 setup(props){
  const myvar=ref(Значение);
  return {myvar};
 }
}
</script>

Состав
Динамически изменить переменную
Value

  • создаём стрелочную функцию, в которой внутри тела изменяем значение переменной, обращаясь к полю value
  • отметим возвращение функции addmyvar из setup для доступа в шаблоне компонента
    (привязка к button прослушивание события click)
<template>
<div>{{myvar}}</div>
<button @click="addmyvar">add</button>
</template>
<script>
import {ref} from 'vue'
export default {
 setup(props){
  const myvar=ref(0);
  const addmyvar = () =>{
    myvar.value+=1;
  }
  return {myvar,addmyvar };
 }
}
</script>
Рубрики
Vue project Vue store Vue основы Vue.js Vue3 логика

Структура Store

resources\store.js
главный файл, в котором
подключаются остальные модули Store
из папки resources\store\store\…js

import {createStore} from "vuex";
export default createStore({
state:{
},
getters:{
},
mutations:{
},
actions:{
},
modules:{
},
});

для того чтобы создать глобальное хранилище используется функция createStore который принимает объект с полями.
Четыре поля составляют ядро VueX

state
само состояние. Описываем данные, которые в нашем приложении

getters
некие computed свойства. Кэшируемые вычисляемые значения

mutations
изменять состояние напрямую мы не можем, но можем изменять с помощью мутации. Мутации представляют из себя функции, внутри которых мы меняем значение какого то поля в состоянии.

actions
функции, которые используют внутри себя мутации. Напрямую из actions изменять состояния не рекомендуется.
Но мы можем внутри этих action-ов делать мутации. В свою очередь внутри action-ов мы делаем какие-то сайт эффекты например получаем какие то данные из сервера, вызывем мутации и сохраняем эти данные в состоянии.

Глобальное состояние приложения во Vue.js
Vue.js