Question

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

因此，我有一个https://pouchdb.com/guides/changes.html API，我可以使用它来监听对数据库的更改，并在发生这种情况时调用一个操作，该操作会使Client 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项目时正确地记得，我研究了如何协调商店和数据库，然后想到了“为什么要打扰？它们只是两种本地存储” < / em>。只要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更新实时更新

2 个答案: