Vue.js & Vuex Language Selector

Vue.js with Vuex. Inspired by https://jsfiddle.net/simon10/qh7r3oj5/

by Amresh Venugopal

HTML

<script src="https://rawgit.com/Atinux/vuex/master/dist/vuex.js"></script>
<div id="app">
  <mybuttons></mybuttons>
  <mycomponent1></mycomponent1>
</div>
<script src="https://unpkg.com/vuex"></script>

JavaScript

var store = new Vuex.Store({
  state: {
    lastClickTime: null
  },
  getters: {
    getLastClickTime: state => {
      return state.lastClickTime
    }
  },
  mutations: {
    updateLastClickTime: (state, payload) => {
      state.lastClickTime = payload
    }
  },
  actions: {
    syncUpdateTime: ({ commit }, payload) => {
      commit(updateLastClickTime, payload)
    },
    asyncUpdateTime: ({ commit }, payload) => {
      setTimeout(() => {
        commit(updateLastClickTime, payload)
      }, Math.random() * 5000)
    }
  }
})

var Mycomponent1 = Vue.extend({
  template: `<p>{{ store.getters.getLastClickTime }}</p>`
})

var Mybuttons = Vue.extend({
  template: `
  <button 
  	@click.prevent=mutationTest()>
    Mutation Test
  </button>
  <button 
  	@click.prevent=syncActionTest()>
    sync Action test
  </button>
  <button 
  	@click.prevent=asyncActionTest()>
    Async Action test
  </button>
  `,
  methods: {
    mutationTest() {
    	this.store.mutations.updateLastClickTime(Date.now())
    },
		syncActionTest() {
    	this.store.actions.syncUpdateTime(Date.now())
    },
		asyncActionTest() {
    	this.store.actions.asyncUpdateTime(Date.now())
    },
  },
  created () {
   console.log('store: ', this.store)
  }
})

new Vue({
  el: '#app',
  components: {
    'mybuttons': Mybuttons,
    'mycomponent1': Mycomponent1
  },
  store
})