Simple Vue.js OrbitDb chat example

Orbit.vue

Taken from docs here: 

https://github.com/orbitdb/orbit-db/blob/master/GUIDE.md

and here: 

https://github.com/orbitdb/orbit-db/blob/master/API.md#orbitdbfeednameaddress

ONE CAVEAT: In this example I am creating a new hash for each load of the page. 
Since people can only see whats in the db with their hash, it will only output what the user types and not other users.

If you REALLY want this to work, what you do is you save the db hashes as key value pairs in a db and let the user retrieve
them when they log into different chatrooms.

Like this:
const db = await orbitdb.open('/orbitdb/Qmd8TmZrWASypEp4Er9tgWP4kCNQnW4ncSnvjvyHQ3EVSU/first-database')
Linky:
https://github.com/orbitdb/orbit-db/blob/master/API.md#orbitdbopenaddress-options


<template>
  <div class="buy">
    <br/>
    <h1>
      Interplanatary Chat Server
    </h1>
    <input class='input1' v-model="orbitPackage"/>
    <input class='button1' @click="launchToOrbit" value='send message'/>
    <div>
      <h2>
        Messages from beyond time and space:
      </h2>
    </div>
    <div>
      {{outerMessages}}
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import IPFS from 'ipfs';
import OrbitDB from 'orbit-db';


export default {
  name: 'Buy',
  props: {
    msg: String,
  },
  data: function(){
    return {
      ipfs: null,
      dataString: 'dataString', 
      ipfsDBREADY: false, 
      orbitdb: null, 
      db: null,
      orbitPackage: null, 
      outerMessages: null
    }
  },
  mounted: function() {
    const ipfsOptions = {
      EXPERIMENTAL: {
        pubsub: true
      }
    }
    this.ipfs = new IPFS(ipfsOptions)
    this.ipfs.on('ready', async () => {
      this.orbitdb = new OrbitDB(this.ipfs)
      const access = {
        write: ['*'],
      }
      this.db = await this.orbitdb.feed('zennifyMeDBS00PER1337')
      this.ipfsDBREADY = true;
      this.collectMessagesOnTimer();
    })

  },
  created: function(){
    console.log('dataString is: ' + this.dataString);
    console.log('value of testString: ', this.$store.state);
  },
  computed: {
   ...mapGetters([
     'testString'
   ])
  },
   methods:{
    ...mapActions([
     'testAction',
    ]),
    launchToOrbit: function(){
      console.log('inside launchToOrbit')
      console.log('value of this.ipfs: ', this.ipfs);
      if(this.ipfsDBREADY === true){
        console.log('inside launchToOrbit handler');
        console.log('value of this.db: ', this.db);
        const asyncCall = async() => {
          const hash = await this.db.add({ someUser: this.orbitPackage })
          console.log('value of the hash: ', hash);
          this.outerMessages =  await this.db.iterator({ limit: -1})
            .collect()
            .map((e)=>e.payload.value);
          // console.log('value of all after set: ', all);
        }
        asyncCall();
      }
    },   
    collectMessagesOnTimer: function(){
      console.log('inside collectMessagesOnTimer');
      const timerFunc = () => {
        const asyncCall = async() => {
          console.log('collecting messages')
          this.outerMessages =  await this.db.iterator({ limit: -1})
            .collect()
            .map((e)=>e.payload.value);
        }
        asyncCall();
          setTimeout(()=>{
            timerFunc();
          }, 1000)
      }
      timerFunc();
    },
    updateTestString: function(newTestString){
      console.log('inside updateTestString and newTestString: ', newTestString.target.value)
      this.dataString = newTestString.target.value
    },
    sendTestString: function(){
      console.log('inside sendTestString')
      console.log('value of this.dataString: ', this.dataString);
      this.testAction({newString: this.dataString})
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.buy{
  margin-top: 20vh;
  color: white;
  font-size: 2rem;
  height: 10vh;
}
</style>