Question

我看上去很简单。渲染模板后，它将对我的Web服务器进行API调用，并将数据渲染到模板。现在，我想在vue组件中查看这些数据以了解即将发生的更改。每当发生更改时，我都希望使用来自API的数据来更新模板。

一个解决方案是，我可以编写每隔10秒就会调用一次的刷新方法。（等等，这是我所不想要的）

我想要观察者使用类似Angular的方法。

顺便说一句。我是vue的新手，我开始与Laravel学习Vue

编辑：我的代码：

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>

我照你下面提到的做了。但是，如果数据更改，则视图不会更新。

Answer 1

您可以使用vue-rx在Vue.js中使用Observables。

以下示例每10秒对API服务进行一次AJAX调用，并返回一个随机笑话：

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>

Answer 2

您未包含任何代码，因此我只添加示例：

这是模板标记：

<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
    },
}

如果您需要更多相关信息，可以阅读Computed Properties and Watchers上的Vue文档。

Answer 3

您正在同时询问2或3个问题，所以我将尝试部分回答。

Vue中的角度可观察物

Vue事件系统是Angular可观察对象的直接替代品。您可以使用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()方法来一遍又一遍地重做请求，但是老实说没有理由使用它。您可以将请求放入方法中，然后在一个间隔内调用它。

更新数据的更好方法可能是使用Websocket服务器，但这是您需要设置的。没有它，您要么不得不重复执行api请求，要么就不用再刷新它，直到用户愿意为止。

更新模板

Vue中的数据始终是反应性的。如果模板中引用的数据发生更改，模板将自动重新呈现。如果更改对象，则可能需要使用辅助方法Vue.set或Vue.delete（docs）。这样可以确保数据保持反应性，从而更新渲染的模板。

Answer 4

我来看看类似Socket.IO的东西。它利用websocket的方式，这是客户端与服务器之间的双向连接。这样一来，服务器就可以告知您有关网站的更改并向下馈送数据，而无需您进行轮询（值得注意的是，尽管不支持websocket的信息，socketio仍会轮询信息）。

Answer 5

Laravel为我的问题提供了一个开箱即用的解决方案。关键字是广播事件。使用这种方法，确实很容易处理套接字连接。除了这一出色的功能，您还可以使用Socket.io和Redis。

Laravel文档：https://laravel.com/docs/5.7/broadcasting

由于我不知道只要我的数据发生更改，vue总是会重新渲染模板，因此不再需要其他东西。像Angular中的观察者一样

Vue：有没有办法检测来自API的更改数据

5 个答案:

Vue中的角度可观察物

刷新数据

更新模板