vue-worker的使用

介绍：改插件将复杂的worker进行了一次的封装，暴露出几个方法简单好用（单独开启一个线程异步处理数据）

 

// 安装插件

    npm install vue-worker --save


// 在main.js引入使用

    import VueWorker from 'vue-worker'

    Vue.use(VueWorker)


// 在组件中使用，直接this.$worker就可以使用



/*

    API：run()方法的使用，第一个参数是一个函数，用于处理数据，第二个参数是一个数组，是函数的实参。run方法执行一次就会断开，支持promise

 　　// 通过this.$worker.run这个方法，跑起一个worker，
   　// worker是在另外的线程里面跑的，所以可以在run的第一个参数函数里面执行一个非常大计算的操作
   　// run方法像Promise一样提供.then和.catch，then的参数就是run第一个参数函数的返回值

*/ this.$worker.run((n, b) => n + 10 + b, [2, 10])
　　.then(res => { console.log(res) })

 /* API：create()方法，可以持久化worker，接收一个数组参数，数组中是每一个对象，对象中是id和方法 */

 worker: null, 

action: [{ message: 'abc', func (data) { return data } }, { message: 'msg', func (data) { return data } }]

 this.worker = this.$worker.create(this.action) 

// postMessage实例对象方法，第一个参数是要触发那个对象中的方法，第二个参数是传递给方法中的实参 

 //它不是this.$worker的方法，而是通过this.$worker.create之后得到的object的一个方法。

 this.worker.postMessage('msg', [{ name: '哈哈哈' }]).then(res => { console.log(res) }) 

/* API：postAll实例方法，如果不传递参数，会触发所有对象中的方法，参数可以是字符串，或者对象和数组 */ 

// 数组参数：数组中必须是对象，message属性标示触发那个方法，第二个属性args是给方法传递的实参 

this.worker.postAll([{ message: 'pull-data', args: [{ name: '小兰' }] }])
 .then((res1, res2) => { console.log(res1) }) 


// 字符串形式 this.worker.postAll('pull-data')
 .then((res1, res2) => { console.log(res1) }) 


/* API；register实例方法，可以动态注册方法和标示 */
 this.worker.register({ message: 'copu', func: () => 1 }) 

// unregister方法可以取消注册
 this.worker.unregister('copu')
 this.worker.unregister('pull-data')