Vue-resource | $http

Vue-resource - позволяет отправлять любые http запросы и делать это асинхронно, т.е. приложение не будет зависать каждый раз когда нужно будет подгрузить новые данные. Ссылка на git.

Установка

$ npm install vue-resource --save-dev

В главном исполняемом файле подключаем vue-resource

var VueResource = require('vue-resource')

Регистрируем

Vue.use(VueResource)

Получение данных через $http

Выполненный запрос возвращает промис с ответом, который можно обработать с помощью then(), куда мы передаём resolve, reject. Кроме $url - адреса на который передаётся запрос, можно передавать и параметры, состоящие из параметров и params и headers.

new Vue({
    methods: {
        getAllPosts: function() {
			var options = {
                params: {
                    _limit: 5
                },
                headers: {
                    'Content-Type': 'application/json'
                }
            }
            this.$http.get($url, options).then(resolve, reject);
        }
    }
})

Использование resource

Отличие между $http и resource  в том что в ресурс вместо конкретного адреса можно передать готовый шаблон для отправки всех запросов. В результате чего можно использовать один и тот же ресурс как для получения массива данных так и для загрузки 1 записи.

new Vue({
    computed: {
        resource: function() {
            return this.$resource('https://jsonplaceholder.typicode.com/posts{/id}')
        }
    },
    methods: {
        addPostItem: function() {
            this.resource.save(this.post)
        },
        getPostItem: function() {
            this.resource.get({ id: 1 }).then(resolve, reject)
        },
        getPostArray: function() {
            this.resource.get().then(resolve, reject);
        }
    }
})

Подробнее про настройку Vue-resource

• vue-resource - [git]
• HTTP - [git]
• Resource - [git]