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项目时没记错，我研究了如何协调商店和数据库，然后想：“为什么要打扰？它们只是两种本地存储”。只要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
          })
      })
    },