Question

开始使用Vue + Rethink，喜欢它们的概念，并开始创建一个简单的待办事项列表。我有一个骨架应用程序完成Vue + Express + RethinkDB与CRD（尚未更新）操作正常工作。一切都很花哨，但当然数据不是实时的。当我插入任务/待办事项时，我需要刷新页面才能看到它，等等。

我查看了RethinkDB的更改提要，看起来很有趣，但我并不是100％确定如何将它们应用到我当前的Express API设置中。我发现了一些使用Socket.io的例子，现在我也试图将它实现到我的设置中（这是必要的吗？）。

我的代码库全部在这里：https://github.com/patrickbolle/vue-todo

以下是我的TaskList.vue组件的示例，其中我将显示所有项目 -

import TaskNew from './TaskNew'
var socket = io.connect('http://localhost:8099');

export default {
  components: {
    TaskNew
  },

  data () {
    return {
      tasks: []
    }
  },

  created () {
    this.$http.get('http://localhost:8090/api/tasks').then(response => {
      this.tasks = response.data
    })
    var vm = this
    socket.on('tasksSocket', function (task) {
      vm.tasks.push(task)
    })
  },

这种工作，当我通过发布到我的API创建新任务时，会出现一个（空白）任务，但不显示任何预先存在的任务。

这是/ tasks的GET路线：

//GET - All Tasks
router.get('/tasks', (req, res) => {
  r.table("tasks").changes().run().then(function(cursor) {
    cursor.each(function(err, task) {
      io.sockets.emit("tasksSocket", task);
    })
  })
})

老实说，我只是越来越混淆自己，我来自流星背景，所以做这个网络套接字/ API的东西让我很困惑。如果有人能给我指向正确的方向，我将非常感激。

基本上我需要： - 从我的GET / api / tasks路线中检索任务 - 从套接字中获取新任务...这也是在GET / api / tasks路由上？ - 在Vue JS中显示它们

Vue + Socket.io + RethinkDB - 实时的基本CRUD操作

0 个答案: