Using OrbitDB as a reactive store with VueJS

OrbitTest.vue

<template>
  <div>
    <button @click="addItem('wut')">count is: {{ count }}</button>

    <div
      v-for="result in results"
      :key="result.id"
      @click="removeItem(result.id)"
    >
      {{ result.id }}
      {{ result.value }}
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

// Set to existing OrbitDB url
const DB_URL = '/orbitdb/existing/db'

export default defineComponent({
  data() {
    return {
      db: undefined,
      replicatedAt: 0,
    }
  },
  
  async mounted() {
    const ipfsOptions = {
      repo: './ipfs',
      start: true,
      preload: {
        enabled: false,
      },
      EXPERIMENTAL: {
        pubsub: true,
      },
      config: {
        Addresses: {
          Swarm: [
            // Use IPFS dev webrtc signal server
            '/dns4/wrtc-star1.par.dwebops.pub/tcp/443/wss/p2p-webrtc-star/',
            '/dns4/wrtc-star2.sjc.dwebops.pub/tcp/443/wss/p2p-webrtc-star/',
            '/dns4/webrtc-star.discovery.libp2p.io/tcp/443/wss/p2p-webrtc-star/',
          ],
        },
      },
    }

    const ipfs = await window.Ipfs.create(ipfsOptions)
    const orbitdb = await window.OrbitDB.createInstance(ipfs)
    this.db = await orbitdb.feed(DB_URL)
    this.db.load()
    this.db.events.on('ready', () => {
      console.debug('ready')
      this.replicatedAt = Date.now()
    })
    this.db.events.on('replicated', () => {
      console.debug('replicated')
      this.replicatedAt = Date.now()
    })
  },

  computed: {
    results() {
      if (!this.db) return

      // Accessing the replicatedAt variable here is essential
      // This will automatically invalidate the cached result of the results property
      console.debug('replicated at:', this.replicatedAt)

      return this.db.all.map((item) => {
        return { id: item.hash, value: item.payload.value }
      })
    },
    count() {
      if (!this.results) return 0

      return this.results.length
    },
  },

  methods: {
    addItem(text: string) {
      this.db.add(text)
    },

    removeItem(hash: string) {
      this.db.remove(hash)
    },
  },
})
</script>

The replication seems not to work for me, It is not a problem with this code
, cause the examples on the OrbitDb homepage fail to sync unless F5(Refresh) too

anyway, created an example of Vue(With wpa) that would cash git and audio,
and meanwhile load it from a remote gateway.

https://shemeshg.github.io/test-ipfs/#/

My example is not a very efficient since the local blob url is not cashed through vueStore.

I predict IPFS for WPA applications is going be really cool.