MyInput.vue
простой UI тег Input в HTML5, который реализуется в файле MyInput.vue как компонент
Рубрики
MyInput.vue
Рубрика: Vue project
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-ов мы делаем какие-то сайт эффекты например получаем какие то данные из сервера, вызывем мутации и сохраняем эти данные в состоянии.
Рубрики
Сортировка постов
Нам понадобится выпадающий список, в котором будем выбирать по какому полю будет идти сортировка (например по заголовку или описанию)
beforeCreate
хук
он вызывается в тот момент, когда компонент ещё не был создан. На этом этапе инициализируются события и инициализируется жизненный цикл. Сам хук является достаточно редким кейсом в использовании.
cretaed
хук
в этот момент в компонент добавляются различные инъекции и реактивность. В этом хуке можно делать какую то дефолтную реализацию, проверять какие то условия
Отрабатывает рендер функция
beforeMount
хук
отрабатывает до того, когда компонент монтируется в дерево
mounted
хук
отрабатывает, когда компонент полностью монтирован в дерево. Он часто используемый. Его мы можем использовать для запросов на сервер. Компонент монтировался, запрос сделали и сразу какие то данные отрисовали.
После того как компонент монтировали, в нём могут изменяться какие то данные. Соответственно компонент будет перерендереваться. Для того чтобы отслеживать эти обновления есть два хука.
beforeUpdate
хук
отрабатывает перед обновлением
update
хук
отрабатывает после
компонент демонтируется
делается очистка.
отписываемся от каких то событий, очищаем stor
Реализуем функцию, с помощью которой будем получать список постов с Сервера.
JSON Placeholder
сервис
Для этого воспользуемся сервисом, который позволяет с помощью запросов получать определённые данные. Мы делаем некий запрос и получаем некий ответ. Структура объектов должна быть точно такая же как и в приложении.
limit
За один запрос приходит много постов. Поэтому мы будем делать постраничный вывод (по 10 постов на страницу). В query параметр можно передать ?_limit=10
axios
библиотека
npm i axios