vue-processor
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.0 • Public • Published

    VueProcessor

    VueProcessor allows you process large amounts of data without blocking the UI.`

    Table of contents

    Installation

    npm i vue-processor
    
    # or
    
    yarn add vue-processor

    Default import (Vue 2)

    import { createApp } from 'vue'
    import App from './App.vue'
    import VueProcessor from 'vue-processor'
    
    const app = createApp(App)
    
    app.use(VueProcessor)
    app.mount('#app')

    Default import (Vue 3)

    import Vue from 'vue'
    import VueProcessor from 'vue-processor'
    Vue.use(VueProcessor)

    Options

    Install with global options (options)

    let options {
      maxTime: 500, // Max time (in milliseconds) per chunk. Default: 200ms
      delay: 2 // Timeout delay (in milliseconds). Defaults to 1ms
    }
    
    Vue.use(VueProcessor, options)

    Usage

    Global Example

    Vue.$processor(largeArray, (item, index) {
      // Your code here.
    }).then(() => {
      // processing complete
    })

    Within a component

    methods: {
      yourMethod () {
        this.$processor(largeArray, (item, index) {
          // Your code here.
        }).then(() => {
          // processing complete
        })
      }
    }

    EXAMPLE VUE COMPONENT

    <template>
      <button
        @click="doSomethingBig"
      >
        Lets make them all count to 1 million
      </button>
    </template>
    
    <script>
    export default {
      data () {
        return {
          running: false,
          arr: [{
            count: 1
          }, {
            count: 2
          }, {
            count: 3
          }, {
            count: 4
          }, {
            count: 5
          }, {
            count: 6
          }, {
            count: 7
          }, {
            count: 8
          }, {
            count: 9
          }, {
            count: 10
          }, {
            count: 11
          }, {
            count: 12
          }, {
            count: 13
          }, {
            count: 14
          }, {
            count: 15
          }, {
            count: 16
          }, {
            count: 17
          }, {
            count: 18
          }]
        }
      },
      methods: {
        doSomethingBig () {
          this.running = true
          this.$processor(this.arr, (item, index) => {
            for (var i = item.count; i <= 1000000; ++i){
            	item.count = i
            }
          }).then(() => {
            this.running = false
          })
        }
      }
    }
    </script>

    Install

    npm i vue-processor

    DownloadsWeekly Downloads

    3

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    10 kB

    Total Files

    7

    Last publish

    Collaborators

    • timwickstrom