...
actions:{
ИмяФункции(
{state,rootState,commit,dispath,getters,rootGetters},ДопПараметр) {
...
return ...
}
}
...Рубрика: Vue.js
фреймворк
JavaScript
с открытым исходным кодом
для создания пользовательских интерфейсов
похожий
Angular, React
плюсы
реактивность данных (обновлять данные на лету)
- Установка библиотеки Axions
npm i axios- GET
в script.methods компонента создаём функцию
async fetchRows(){
try {
const responce = await axious.get('https://...?_limit=10');
console.log(responce);
} catch (e){
alert('Ошибка');
}
}...
getters:{
ИмяГеттера1(state){
return ...;
},
ИмяГеттера2(state, getters){
return ...;
},
ИмяГеттера3:(state)=>(Параметр)=>{
return ...;
}
}
...<template>
<тег v-bind:class="{НазваниеКласса,Код}">
</template>Код
условие bool, по которому будет добавляться этот класс
- Вызов в отсеке script в методах, хуках
this.$store.getters['ИмяВычисления'](Параметры);- Родительская компонента содержит переменную в data
<template>
<comp v-bind:ИмяПропса="ИмяОбъекта">
</template>
<script>
export default{
data(){
return {
ИмяОбъекта: Значение
}
}
}
</script>- Дочерняя компонента comp
пропсы нельзя изменять
<script>
export default{
props:{
ИмяПропса:{
type:Array,
requered:true,
}
}
}
</script>- Вызов экшена в script в отсеках
this.$store.dispatch(‘ИмяЭкшена‘);
this.$store.dispatch(‘ИмяМодуля/ИмяЭкшена‘);
Динамическая подгрузка постов
mounted
хук mounted представляет собой обычную функцию.
Нам необходимо вызвать функцию fetchPosts для того чтобы посты подгрузились сразу при первом открытии приложения.
setTimeout
Динамическая задержка
для того чтобы видеть загрузку
isPostsLoading
модель
индикатор, которая оповещает что загрузка идёт
src\App
<template>
<div class="app">
<h1>Страница с постами</h1>
<my-button
@click="showDialog"
style="margin: 15px 0;" кнопка не должна прилипать к заголовку
>Создать пост</my-button>
<my-dialog v-model:show="dialogVisible">
<post-form
@create="createPost"
/>
</my-dialog>
<post-list
:posts="posts"
@remove="removePost"
v-if="!isPostsLoading"
/>
<div v-else>Идет загрузка...</div>
<div>
</template>
<script>
import PostForm from "@/components/PostForm";
import PostList from "@/components/PostList";
import axios from "axios";
export default{
components:{
PostList,PostForm,
}
data(){
return {
posts:[],
dialogVisible:false,
isPostsLoading:false,
}
}
methods:{
createPost(post,second,third){
this.posts.push(post);
this.dialogVisible = false;
}
removePost(post) {
this.posts = this.posts.filter(p => p.id !== post.id)
},
showDialog(){
this.dialogVisible = true;
},
async fetchPosts(){
try{
this.isPostsLoading = true;
setTimeout(async()=> {
const response = await axios.get('https://jsonplaceholder.typicode.com/posts?_limit=10');
this.posts = responce.data;
this.isPostsLoading = false;
},1000)
} catch(e){
alert('ошибка')
}
}
},
mounted(){
this.fetchPosts();
}
}
</script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.app{
padding: 20px;
}
</style>
Рубрики
Отладка Vue в браузере
Отладка Vue.js
Vue.js devtools
плагин в браузере хроме
в настройках ставим
- разрешение для всех сайтов
- разрешение открыть локальные файлы по ссылкам
Открытие плагина
F12 и открываем вкладку Vue
- мы можем отследить дерево компонентов
- мы можем отследить модели у компонента, которую можем изменить