在 vue 组件中使用 Worker 输出

Question

我试图通过 window.localStorage 将我的工作人员的输出发送到我的 component.vue。

有人知道如何在我的组件 vue 中自动显示和更新我的 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);
    } 
});

我的-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

不可能将 localStorage 值当作反应式来处理。可能这就是您计算的属性不起作用的原因。

一种可能的解决方案是将您的 worker 导入您的组件并用于更新反应变量。

类似于：

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

在 vue 组件中使用 Worker 输出

Use Worker output in a vue component

worker

listener

node.js

vue.js

vue-component