Vue: есть ли способ обнаружить изменения данных, поступающих из API - PullRequest
Новая
       8

Vue: есть ли способ обнаружить изменения данных, поступающих из API

0 голосов
/ 13 января 2019

То, что я ищу, просто. Как только я представлю свой шаблон, он выполнит API-вызов для моего веб-сервера и отобразит данные в шаблон. Теперь я хочу посмотреть эти данные в компоненте vue на предмет предстоящих изменений. Всякий раз, когда что-то изменилось, я хочу обновить шаблон с данными, поступающими из API.

Одним из решений является то, что я мог бы написать что-то вроде метода обновления, который будет вызываться каждые 10 секунд. (Что-то, чего я не хочу)

Я хочу, чтобы Angular работал с наблюдателями.

Btw. Я новичок в Vue, и я начал изучать Vue с Laravel

Edit: Мой код:

Vue.component 

<template>
<div class="w-50">
    <table class="table ">
        <thead>
        <tr>
            <th scope="col"></th>
            <th scope="col"></th>
        </tr>
        </thead>
        <tbody>
            <tr v-for="user in users" v-bind:key="user.id">
                <td>{{ user.name }}</td>
                <td>{{ user.timer }}</td>
            </tr>
        </tbody>
    </table>
</div>
</template>

<script>
    export default {
        data() {
            return {
                users: [],
                user: {
                    id: '',
                    active: ''
                }
            };
        },
        mounted() {
            axios.get('/users')
                .then(res => {
                    this.users = res.data;
                    console.log(res.data);
                })
        }
    }
</script>

Я сделал, как вы упомянули ниже. Но представление не обновляется, если данные изменяются.

Ответы [ 5 ]

0 голосов
/ 14 января 2019

Laravel поставляется с готовым решением для моей проблемы. Ключевое слово для этого - Трансляция событий. При таком подходе действительно легко обрабатывать сокетные соединения. В дополнение к этой замечательной функции вы можете использовать Socket.io и Redis.

Laravel Doc: https://laravel.com/docs/5.7/broadcasting

Поскольку я не знал, что vue всегда перерисовывает шаблон всякий раз, когда меняются мои данные, больше нет необходимости в sth. как наблюдатель в Angular

0 голосов
/ 14 января 2019

Я бы посмотрел на что-то вроде Socket.IO . Он использует websocket, который является двухсторонним соединением с вашим клиентом и сервером. Это позволяет серверу сообщать вашему веб-сайту об изменениях и передавать эти данные без необходимости запрашивать их (стоит отметить, что socketio будет запрашивать информацию, если веб-сокеты не поддерживаются).

0 голосов
/ 13 января 2019

Вы задаете 2 или 3 вопроса одновременно, поэтому я постараюсь ответить на них по частям.

Угловые наблюдаемые в Vue

Непосредственной заменой угловых наблюдаемых является система событий Vue. Вы можете прослушивать события с помощью this.$on и прекратить прослушивание с помощью this.$off. Чтобы сделать это приложение широко, вам нужно сделать что-то вроде шины событий: 

Vue.prototype.$bus = new Vue();

// in components
mounted () {
  this.$bus.$on('myMessage', this.handleMyMessage);
},

beforeDestroy () {
  this.$bus.$off('myMessage', this.handleMyMessage);
}

Тем не менее, это не похоже на то, что вы действительно хотите использовать.

Обновление данных

Я подозреваю, что вы хотите использовать метод retry(), чтобы повторять запрос снова и снова, но, честно говоря, нет причин использовать это. Вы можете просто поместить запрос в метод и вызвать его в течение интервала.

Лучшим способом обновления ваших данных может быть использование сервера веб-сокетов, но это то, что вам нужно настроить. Без этого вам придется либо выполнять запросы API повторно, либо не пытаться обновить его, пока пользователь не захочет.

Обновление шаблона

Данные в Vue всегда реактивны. Если данные, на которые есть ссылки в шаблоне, изменяются, шаблон автоматически перерисовывается. Если вы меняете объект, вам может потребоваться использовать вспомогательные методы Vue.set или Vue.delete ( docs ). Это обеспечит реактивность данных и, таким образом, обновит представленный шаблон.

0 голосов
/ 13 января 2019

Вы можете использовать vue-rx для работы с Observables в Vue.js.

Следующая демонстрация каждые 10 секунд выполняет вызов AJAX службе API, которая возвращает случайную шутку: 

new Vue({
  el: '#demo',
  subscriptions: function () {
    return {
      joke: rxjs.timer(0, 10000).pipe(
        rxjs.operators.switchMap(() => rxjs.ajax.ajax('https://geek-jokes.sameerkumar.website/api')),
        rxjs.operators.map(res => res.response) 
      )
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/rxjs/bundles/rxjs.umd.js"></script>
<script src="https://unpkg.com/vue-rx@6.1.0/dist/vue-rx.js"></script>
<div id="demo">{{ joke }}</div>
0 голосов
/ 13 января 2019

Вы не включили никакого кода, поэтому я просто добавлю свой пример:

это тег шаблона: 

<template>
    <div>
        <h1> {{title}} </h1>
    </div>
</template>

сценарий: 

data(){
    return {
        title: '',
    },
},
mounted(){
    axios.get('/api/items/all').then(response => {
        this.title = response.data.title;
    });
}

и этого должно быть достаточно для того, чтобы Vue.js принял изменения и правильно отобразил новый заголовок (в моем примере). Если вы хотите следить за изменениями до их визуализации, вы можете добавить свойство watch, например: 

watch:{
    'title': function (newVal, oldVal) {
        // you can work with a new value here
    },
}

Если вам нужна дополнительная информация по этому вопросу, вы можете прочитать документы Vue в Вычисленные свойства и наблюдатели .

...