0

开始使用 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);
    })
  })
})

老实说，我只是越来越困惑自己，我来自 Meteor 背景，所以做这个 web socket/API 的东西让我很困惑。如果有人能给我一个正确方向的指针，我将不胜感激。

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

4

0 回答 0