Skip to content

Instantly share code, notes, and snippets.

@djmaze
Last active December 19, 2021 17:22
Show Gist options
  • Save djmaze/9e99382f6ad364f0d77830f826c01b55 to your computer and use it in GitHub Desktop.
Save djmaze/9e99382f6ad364f0d77830f826c01b55 to your computer and use it in GitHub Desktop.
Using OrbitDB as a reactive store with VueJS
<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>
@shemeshg
Copy link

shemeshg commented Dec 19, 2021

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment