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>

Pablo Veiga · Accepted Answer · 2021-08-11 13:50:33Z

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

answered Aug 11, 2021 at 13:50

Pablo Veiga

781 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

zergski Over a year ago

why no love people? this is the closest we'll get to dom manipulation in a while. it is, of course a bit jansky and you have to figure out by yourself mostly

Collectives™ on Stack Overflow

Use Worker output in a vue component

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related