Обновление pouchdb + vuex с изменениями - PullRequest
Новая
       20

Обновление pouchdb + vuex с изменениями

0 голосов
/ 11 апреля 2019

У меня есть приложение, которое загружает обновления в VUEX store и синхронизирует их с pouchdb на couchdb.Это здорово, но теперь мне нужно подключить двух клиентов и увидеть изменения почти в реальном времени.

Итак, у меня есть API https://pouchdb.com/guides/changes.html, который я могу использовать для прослушивания изменений в БД и когдаэто происходит, вызывая действие, которое изменяет состояние vuex на клиенте 2. Код ниже.

Однако мне кажется, что бит, который я не могу понять, заключается в том, что этот код не просто прослушивает все время?Так, где я должен поместить это в Vue, чтобы гарантировать, что он слышит любые изменения.Я могу вызвать его, когда я изменяю состояние, и вижу, что оно слышит об этом изменении, но, конечно, я хочу вызвать изменение состояния на клиенте 2 без необходимости их изменения.Нужен ли мне таймер?Похоже, что в пакетных документах эти изменения предполагают, что API должен иметь возможность обновлять пользовательский интерфейс на основе изменения данных, которое я, вероятно, могу вызвать нажатием кнопки, чтобы проверить изменения ... но я хочу прослушивать в режиме реального времени? 

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)
        })

Ответы [ 2 ]

0 голосов
/ 11 апреля 2019

Это то, что я закончил! 

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
          })
      })
    },
0 голосов
/ 11 апреля 2019

Ваше объяснение немного нечетко в том, что вы говорите о client 2, даже не упоминая client 1. Я предполагаю, что client 2 - пассивный слушатель, а client 1 - то, где данные изменяются. Если я правильно помню, когда в прошлом году я создавал свой проект Vue / PouchDB, я изучил, как координировать Store и базу данных, а затем подумал: "Зачем беспокоиться? Это просто два вида локального хранилища" . Пока изменения в client 1 реплицируются на ваш сервер Couch и client 2 обнаруживает эти изменения на стороне сервера и записывает их в реактивные переменные, они будут передаваться в пользовательский интерфейс.

Я использовал replicate.to() для хранения изменений на стороне клиента и replicate.from() для обнаружения изменений на стороне сервера. Функции replicate() имеют собственный таймер, постоянно отслеживающий очередь изменений, поэтому вам не нужно накатывать свои собственные.

...