Nonlinear Programming Methods

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

    0.1.6 • Public • Published

    vue-plugin-timers

    Travis (.org) Codecov npm npm npm type definitions unpkg umd min:gzip size BCH compliance Total alerts Language grade: JavaScript Maintainability codebeat badge Codacy Badge

    A Vue.JS plugin/mixin that helps set timeouts and heartbeats in your Vue components

    The Problem - Creating Heartbeats

    Say we create a vue.js component

    export default {
      data: {
        minutes: new Date().getMinutes()
      }
    }

    What if we want minutes to update along with the user's clock when this component is open.

    export default {
      get minutes() {
        return new Date().getMinutes()
      }
    }

    But, unfortunately this does not work. Reason ? new Date() or Date.now() type of objects are not reactive We get their value once, but it doesn't update every minutes/second or so

    Solution - Use timers

    With vue-plugin-timers we can create a timers option in Vue components. Timers run a method in your component every x seconds (where you can choose x).

    How to Use ?

    We can activate timers in two ways

    1. As a Component Mixin in any component

      // @/components/AwesomeComponent.vue <script>
      import { VueTimersMixin } from 'vue-plugin-timers'
      export default {
        mixins: [VueTimersMixin],
        ...,
        timers: { ... }
      }
    2. As a global Vue Plugin if you want to use in multiple components

      // @/main.js
      import Vue from 'vue'
      import VueTimers from 'vue-plugin-timers'
      Vue.use(VueTimers)

      You can use timers property in all components now

      // @/components/AnyComponent.vue <script>
      export default {
        ...,
        timers: { ... }
      }

    You can define timers in 2 ways -

    1. As a timers property in component options (in single-file-component export or inside Vue.extend())
    2. If using vue-class-component, then there are @Timer decorators 🎉

    Usage: timers component option

    // @/components/AwesomeComponent.vue - <script>
    export default {
      data: {
        time: new Date().toTimeString()
      },
      methods: {
        updateTime() {this.time = new Date().toTimeString()}
      },
      timers: {
        /* key = name of method */
        updateMinutes: {
          /* interval of delay (default: 1000) */
          interval: 30000,
          /* repeat (default: false)
          true => setInterval, 
          false => setTimeout once */
          repeat: true
        }
      }
    }

    Usage: @Timer decorator

    ⚠️ IMPORTANT: This needs vue-class-component to be installed, (or vue-property-decorator)

    import Vue from 'vue'
    import Component from 'vue-class-component'
    import { Timer } from 'vue-plugin-timer'
     
    @Component
    class TimerComponent extends Vue {
        count = 0
        
        @Timer({ interval: 200 })
        incr() {
          this.count++
        }
    }

    The @Timer decorator takes all the same options as the timers component options hashes do. Except the method name, because you are decorating the method itself and so it is not needed

    NOTE: The umd builds do NOT have the decorator, as decorators are something we usually use when building with Vue CLI using Babel and/or Typescript

    Install

    npm i vue-plugin-timers

    DownloadsWeekly Downloads

    515

    Version

    0.1.6

    License

    MIT

    Unpacked Size

    67.8 kB

    Total Files

    33

    Last publish

    Collaborators

    • championswimmer