vuex-now

A Vuex plugin wich exposes a Reactive Time variable with auto update on a given interval. Useful when you need to update periodically a property on your Vue.JS component.

Why this plugin?

Sometimes you need to update your Vue.JS component data based on the current time or you want to periodically update a computed property. Asigning new Date() to a computed variable might be not enough as time gets cached and property will not be reactive.

This plugin exposes a variable on the Vuex store which autoupdates and computes on a given interval. Based on the idea exposed on the article Reactive Time with Vue.js

Usage

Install the plugin via NPM.

npm install vuex-now

Import the plugin in your Vuex store definition.

import VuexNow from 'vuex-now'

Create a constant to initialize the plugin with your desired updating interval.

/* VuexNow(interval) - inverval: time in miliseconds for autoupdating the now variable */
const now = VuexNow(60 * 1000)

Import the plugin in your Vuex store definition

export default new Vuex.Store({
  modules: {...},
  mutations: {...},
  getters: {...},
  plugins: [now]
})

Then you will be abble to map the Vuex variable into your component.

<template>
Current time is {{ now }}
</template>

import { mapState } from 'vuex'
export default {
    name: 'Your Component',
    data () {
        return { ... }
    },
    computed: {
        ...mapState('now', ['now'])
    }
}

Preview using Vue Developer Chrome Plugin