Рубрики
Без рубрики

4 шаблона AJAX для приложений Vue.js

Vue.js – это Framework ui, но вам часто нужно отображать данные с сервера. Какой лучший способ реализовать AJAX в Vue? В этой статье я охватываю четыре разных подхода, каждый со своими собственными плюсами и минусами.

Автор оригинала: Anthony Gore.

Если вы запрашиваете два разработчиках Vue.js «Какой лучший способ использовать AJAX в приложении?», Вы получите три разных мнения.

Vue не предоставляет официальный способ внедрения ajax, и существует ряд различных шаблонов дизайна, которые могут эффективно использовать. Каждый поставляется со своими собственными плюсами и минусами и должно быть оценено на основе требований. Вы можете даже использовать несколько одновременно!

В этой статье я покажу вам четыре места, которые вы можете реализовать Ajax в приложении Vue:

  1. Корневой экземпляр
  2. Составные части
  3. Действия Vuex.
  4. Маршрут Навигация Гвардии

Я объясню каждый подход, привести пример и охватить плюсы и минусы.

Примечание: эта статья была первоначально опубликована здесь на блоге разработчиков Vue.js на 2017/08/28.

1. корневой экземпляр

С этой архитектурой вы выпускаете все ваши запросы AJAX из корневого экземпляра и храните все все состояние. Если какие-то субъекты нужны данные, он будет спущен как реквизит. Если дополнительные компоненты нуждаются в обновлении данных, для запроса корневого экземпляра будет использоваться пользовательское событие.

Пример:

new Vue({
  data: {
    message: ''
  },
  methods: {
    refreshMessage(resource) {
      this.$http.get('/message').then((response) {
        this.message = response.data.message;
      });
    }
  }
})

Vue.component('sub-component', {
  template: '
{{ message }}
', props: [ 'message' ] methods: { refreshMessage() { this.$emit('refreshMessage'); } } });

Плюс

  • Сохраняет всю вашу логику AJAX и данные в одном месте.
  • Сохраняет ваши компоненты «глупые», чтобы они могли сосредоточиться на презентации.

Господин

  • Большое количество реквизитов и пользовательских событий, необходимых в качестве вашего приложения.

2. Компоненты

С этой архитектурой компоненты несут ответственность за управление своими собственными запросами AJAX и государством самостоятельно. На практике, вероятно, вы, вероятно, захотите создать несколько компонентов «контейнеров», которые управляют данными для собственной локальной группы «презентационные» компоненты.

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

Посмотреть Председатель и контейнерные компоненты Дэна Абрамовым для лучшего описания этой картины.

Чтобы облегчить реализацию этой архитектуры, вы можете абстрактным любую логику Ajax в смесин, затем используйте смесин в компоненте, чтобы сделать его AJAX.

let mixin = {
  methods: {
    callAJAX(resource) {
      ...
    }
  }
}

Vue.component('container-comp', {
  // No meaningful template, I just manage data for my children
  template: '
', mixins: [ myMixin ], data() { return { ... } }, }) Vue.component('presentation-comp', { template:
I just show stuff like {{ mydata }}
, props: [ 'mydata' ] })

Плюс

  • Содержит компоненты развязанными и многоразовыми.
  • Получает данные, когда и где это необходимо.

Господин

  • Не легко сообщить данные с другими компонентами или группами компонентов.
  • Компоненты могут оказаться слишком многими обязанностями и дублирующими функциональными возможностями.

3. Действия Vuex.

С этой архитектурой вы управляете как логикой состояния, так и AJAX в вашем магазине Vuex. Компоненты могут запросить новые данные путем распределения действий.

Если вы реализуете этот шаблон, это хорошая идея, чтобы вернуть обещание от ваших действий, чтобы вы могли реагировать на разрешение запроса AJAX E.G. Скрыть загрузку спиннера, повторно включить кнопку и т. Д.

store = new Vuex.Store({
  state: {
    message: ''
  },
  mutations: {
    updateMessage(state, payload) {
      state.message = payload
    }
  },
  actions: {
    refreshMessage(context) {
      return new Promise((resolve) => {
        this.$http.get('...').then((response) => {
          context.commit('updateMessage', response.data.message);
          resolve();
        });
      });
    }
  }
});

Vue.component('my-component', {
  template: '
{{ message }}
', methods: { refreshMessage() { this.$store.dispatch('refeshMessage').then(() => { // do stuff }); } }, computed: { message: { return this.$store.state.message; } } });

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

Плюс

  • Все плюсы корневой компонентной архитектуры, не требующие реквизитов и пользовательских событий.

Господин

  • Добавляет накладные расходы Vuex.

4. Маршрутные навигационные охранники

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

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

Аккуратный способ реализации этого предназначен для создания конечных точек на вашем сервере для каждой страницы E.G. , /контакт ETC, которые соответствуют названиям маршрута в вашем приложении. Тогда вы можете реализовать универсальный Beforereenter Крюк, который будет объединять все свойства данных в данные компонента страницы:

import axios from 'axios';

router.beforeRouteEnter((to, from, next) => {
  axios.get(`/api${to.path}`).then(({ data }) => {
    next(vm => Object.assign(vm.$data, data))
  });
})

Плюс

  • Делает UI более предсказуемым.

Господин

  • Медленнее в целом, так как страница не может рендер, пока все данные не будут готовы.
  • Не очень поможет, если вы не используете маршруты.

Бонусный шаблон: Server-Render Первый вызов Ajax на страницу

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

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


...

  ...
  


  

Затем Ajax можно использовать более правильно для последующих устройств данных.

Если вы заинтересованы в обучении больше об этой архитектуре, проверьте мою статью Избегайте этого общего анти-образного узора в Pull-Stage Vue/Laravel Apps Отказ

Благодаря Реагировать лучшие практики AJAX Эндрю H фермером для вдохновения.

Стать старшим Vue Developer в 2020 году.

Учитесь и осваивайте, какие профессионалы знают о строительстве, тестировании и развертывании, полностью стековых Vue Apps в нашем последнем курсе.

Учить больше