码迷,mamicode.com
首页 > 其他好文 > 详细

vue-worker的使用

时间:2020-06-27 20:31:43      阅读:222      评论:0      收藏:0      [点我收藏+]

标签:标示   message   worker   fun   api   use   name   main   必须   

vue-worker的使用

 

1.介绍改插件将复杂的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((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.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‘)

 

vue-worker的使用

标签:标示   message   worker   fun   api   use   name   main   必须   

原文地址:https://www.cnblogs.com/zxuedong/p/13199365.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!