pouchdb + vuex 随变化实时更新

Question

我有一个应用程序可以将更新更新到 VUEX 存储并将这些更改从 pouchdb 同步到 couchdb。这很好，但现在我需要连接两个客户端并近乎实时地查看变化。

所以我有 https://pouchdb.com/guides/changes.html API，我可以用它来监听对数据库的更改，当发生这种情况时，调用一个操作来改变客户端 2 上的 vuex 状态。代码如下。

但是我似乎无法解决的一点是这段代码不是一直在听吗？那么我应该把它放在 Vue 的什么地方以确保它听到任何变化。当我进行状态更改时我可以调用它并且我看到它听到了更改但当然我想触发客户端 2 上的状态更改，而无需他们进行更改。我需要一个计时器吗？邮袋文档似乎建议这种变化 api 应该能够根据数据的变化更新 UI ，我可以通过按下按钮来调用它来检查变化......但我想要近乎实时地收听？

pouchdb
        .changes({
          since: 'now',
          include_docs: true
        })
        .on('change', function(change) {
          // received a change
          store.commit('CHANGE_STATE', change.doc.flavour)
        })
        .on('error', function(err) {
          // handle errors
          console.log(err)
        })

Answer 1

你的解释有点模糊，因为你谈论 client 2 而没有提到 client 1。我假设 client 2 是一个被动的监听器，而 client 1 是数据被更改的地方。如果我没记错的话，去年我在构建我的 Vue / PouchDB 项目时，我研究了如何协调存储和数据库，然后想，"Why bother? They're just two kinds of local storage"。只要 client 1 中的更改复制到您的 Couch 服务器并且 client 2 检测到这些服务器端更改并将它们写入反应变量，它们就会传播到 UI.

我使用 replicate.to() 存储客户端更改，使用 replicate.from() 检测服务器端更改。 replicate() 函数有自己的计时器，持续监控更改队列，因此您无需自己滚动。

Answer 2

这就是我最终做的！

actions: {
    SYNC_DB() {
      // do one way, one-off sync from the server until completion
      pouchdb.replicate.from(remote).on('complete', function(info) {
        // then two-way, continuous, retriable sync
        pouchdb
          .sync(remote, { live: true, retry: true })
          .on('change', function(info) {
             store.commit('CHANGE_STATE', info.change.docs[0].flavour)
          })
          .on('paused', function(err) {
            // replication paused (e.g. replication up to date, user went offline)
          })
          .on('active', function() {
            // replicate resumed (e.g. new changes replicating, user went back online)
          })
          .on('denied', function(err) {
            // a document failed to replicate (e.g. due to permissions)
          })
          .on('complete', function(info) {
            // handle complete
          })
          .on('error', function(err) {
            // handle error
          })
      })
    },

pouchdb + vuex 随变化实时更新

pouchdb + vuex update live with changes

couchdb

pouchdb

vue.js

vuex