在 vue 组件中使用 Worker 输出

Posted 2023-02-22

【中文标题】在 vue 组件中使用 Worker 输出

【英文标题】：Use Worker output in a vue component

【发布时间】：2021-09-26 16:32:27

【问题描述】：

我试图通过 window.localStorage 将我的 worker 的输出发送到我的 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);
     
);

我的组件.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>

【参考方案1】：

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

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

类似于：

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)