Use Worker output in a vue component

Question

I tried to send the output from my worker to my component.vue by window.localStorage.

Does anybody know how to show and update my worker's result in my component vue automatically?

This is my code:

worker-api.js

import Worker from "worker-loader!./worker.js";
const worker = new Worker();
worker.addEventListener('message', (e) => {
    window.localStorage.setItem('result', JSON.stringify(e.data));
});
export function sendMessage(msg) {
    worker.postMessage(msg);
}

worker.js

self.addEventListener("message", (e) => {
    var count = e.data;
    while(count < 20) {        
        const result = e.data + 3 
        self.postMessage(result);
    } 
});

my-component.vue

<template>
<p>Count: "{{ result }}"</p>
</template>

<script>
import Button from './Button'
import { sendMessage } from './worker-api'
export default {
  name: 'my-component',
  components: {Button},
  data () {
    return {
      count : 0
    }
  },
  computed: {
     result: function () {
        return JSON.parse(window.localStorage.getItem('result'))
     }
  },
  methods: {,
    postMessage() {
      sendMessage(this.count)
    }
  },
}
</script>

Answer 1

It is not possible to deal with localStorage values as if they were reactive. Probably, that's why your computed property does not work.

One possible solution is to import your worker inside your component and use to update a reactive variable.

Something similar to:

component.vue

<template>
  <button @click="increment">Increment Result</button>
  {{ result }}
</template>

<script>
  export default {
    data() {
      return {
        // the worker path must be relative to the /public folder (in this example, the worker.js file must be at /public/worker.js)
        worker: new Worker('/worker.js'),
        result: 0
      }
    },
    created() {
      const self = this

      this.worker.onmessage = function(event) {
        self.result = event.data
      }
    },
    methods: {
      increment() {
        this.worker.postMessage(this.result)
      }
    }
  }
</script>

/public/worker.js

onmessage = function(event) {
  // data sent by the Vue component is retrieved from 'data' attribute
  postMessage(event.data + 1)
}