node.js - 在 vue 组件中使用 Worker 输出
问题描述
我试图通过 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);
}
});
我的组件.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>
解决方案
无法将 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)
}
推荐阅读
- scrapy - First Scraper > INFO:已抓取 0 页(以 0 页/分钟),抓取 0 项(以 0 项/分钟)
- spring-mvc - spring mvc 4:使用属性格式注释将字符串解析为 java.time.LocalDate
- csv - 将 CSV 数据导入 Google 表格
- c - 如何为结构数组中的 typedef 结构分配内存
- kubernetes-ingress - 在 Minishift 中使用入口
- r - 将 NZMG 坐标转换为纬度/经度
- python - 修改包装函数中的函数代码
- mysql - 使用 Scala JDBC 上传大数据
- rust - std::op 特征“Not”的类型不匹配
- javascript - 如何使用 JavaScript 中的 href 值转到链接?