Vue.js

Basic Vue.js setup for demos

by Lloyd Atkinson

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.0.1/vuex.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>
<div id="app">
  <router-link :to="{ name: 'Home' }">Home</router-link>
  <router-link :to="{ name: 'About' }">About</router-link>
  <router-view></router-view>
</div>

Babel + JSX

const proxy = actions => {
  let proxy = {}

  for (const action in actions) {
    let promise = null
    
    proxy[action] = (args, payload) => {
    	console.log(action)
    	// merge with a start timestamp
	    actionObj = { action: action, start: new Date().getTime() / 1000}
      console.log('action initiated... counting...')
      console.log('action: %s, payload: %o', action, payload)
      
      if (promise) {
      	return promise
      }

      promise = actions[action](args, payload)

      if (promise) {
        promise.finally(() => {
          promise = null
          actionObj.end = new Date().getTime() / 1000 // exit
          console.log('promise took: ', actionObj.end - actionObj.start)
          console.log('promise action concluded')
        })
      } else {
      	actionObj.end = new Date().getTime() / 1000 // exit
	      console.log('no promise took: ', actionObj.end - actionObj.start)
				console.log('no promise action concluded')
      }
    }
  }
  return proxy
}

/* components */
const Home = Vue.component('Home', {
	name: 'home',
  template: `
  	<div>
    	<h1>Home</h1>
      <h2>Count: {{ count }}</h2>
      <button @click="increment(5, true)">Inc (5) - promise (5s)</button>
      <br>
      <button @click="increment(5, false)">Inc (5) - no promise</button>
    </div>
  `,
  computed: {
  	count () {
    	return store.getters.count
    }
  },
  methods: {
  	increment (number, promise) {
    	store.dispatch('increment', { number: number, promise: promise })
    }
  }
})

const About = Vue.component('About', {
	name: 'about',
	template: `
  	<h1>About</h1>
  `
})

/* router */
const router = new VueRouter({
  mode: 'history',
  routes: [
  	{ path: '/home', name: 'Home', component: Home },
    { path: '/about', name: 'About', component: About }
  ]
})

/* store */
const store = new Vuex.Store({
	state: {
		count: 0
  },
  getters: {
  	count (state) {
    	return state.count
    } 
  },
  actions: proxy({
  	increment: (context,...