Vue шаг за шагом. Постраничный вывод данных. Пример#5

Постраничный вывод данных

Продолжая тему разделения полномочий и обязанностей в приложении, будут созданы компоненты по следующему принципу: Родительский компонент будет взаимодействовать с backend-ом, работать с данными и отдавать их дочерним компонентам. Дочерние компоненты будут отображать данные и при необходимости выполнить какие либо операции с данными, будут передавать «родителю» события, но сами изменять данные не будут. Родитель получив событие будет выполнять операции с данными и раздавать их дочерним компонентам.

В данном примере компонент client работает с данными, а таблица вынесена в отдельный компонент с именем client-table. Таким образом родительский компонент client работает с данными, дочерний компонент client-table только их отображает.

Обратите внимание, что компонент таблицы создан на базе миксина table. В миксине table собрано все для постраничного вывода, сортировки, фильтрации и всего, что нам потребуется в табличном выводе данных. В данный момент для описания компоненты таблицы требуется указать только миксин и описать шаблон.

Также создан компонент пагинации. Пагинация пока только на стороне клиента. Т.е. загружаются все данные и выводятся постранично. Методы работы пагинации с участием сервера будут рассмотрены когда дойдем до реального бекенда. При этом компонентный подход позволит быстро решить эту задачу.

Добавлен компонент v-style для создания стилей в шаблонах компонентов. При использовании систем сборки, мы будем использовать vue компоненты и надобность в компоненте v-style отпадет.

Таблица получает от родителя данные:

:rows="data"

Возвращает события:

@read="read_front($event)"
@update="update_front($event)"
@delete="delete_front($event)"

Таким образом компонент таблицы только отображает данные, но не изменяет их. От таблицы родительскому компоненту приходят события, которые сообщают какие действия с какими данными нужно выполнить. При таком подходе есть возможность строить очень сложные, различного рода интерфейсы, где дочерние компоненты только отображают данные в разнообразнейшем виде, а фактическим изменением занимается только родитель. Это позволит в дальнейшем быстрее и с меньшими усилиями модифицировать интерфейсы. А если изменится обработка данных или формат взаимоотношения с backend-ом, то не трогать компоненты, которые занимаются отображением данных.

Вычисляемые свойства

Обратите внимание, что в миксине table используются computed (вычисляемые) свойства. Вычисляемые свойства следует применять всегда, когда нужно обработать входные данные. Фактически вычисляемое свойство — это функция. Но в отличии от методов результат вычисляемого свойства кешируется. Пересчитывается вычисляемое свойство только при изменении данных. Таким образом, при многократном обращении к вычисляемому свойству, будет возвращаться однажды вычисленный результат. В случае если применять методы, вычисления будут выполнятся всякий раз при обращении к нему.

Ссылки

Вычисляемые свойства: https://ru.vuejs.org/v2/guide/computed.html

Резюме

В этом примере рассмотрен способ создания компоненты для постраничного вывода данных на основе миксина. Так же рассмотрен пример взаимодействия между родительской и дочерней компонентами.

В следующем примере

Сортировка столбцов в таблице. Поиск/фильтрация данных. Библиотека vue-material, подключение и первое применение.

Смотри также:

• Vue. Vue-router
• Vue. Свойство data. Основы компонент
• Vue. CRUD. Работа с данными
• Vue. Mixins (Примеси)
• Vue. computed свойства. Постраничный вывод данных
• Vue. Сортировка, поиск данных в таблицах
• Vue. Таблица - трансформер под настольные и мобильные версии
• Vue. Стандартная таблица. Минимизируем код
• Vue. Динамическая загрузка компонент
• Vue. Диалоги и Notifications
• Vue.Стандартный компонент для редактирования данных
• Vue. Разнообразие из кирпичиков
• Flask + Vue. Финальный пример