Vuex

by Amresh Venugopal

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js "></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/2.1.1/vuex.js"></script>
<div id="container">
  <p>{{ getLastClickTime || "No time selected yet" }}</p>
  <button @click="updateTimeSyncTest">Sync Action test</button>
  <button @click="updateTimeAsyncTest">Async Action test</button>
</div>

Babel + JSX

const state = {
	lastClickTime: null
}

const mutations = {
	updateLastClickTime: (state, payload) => {
  	state.lastClickTime = payload
  }
}

const getters = {
  getLastClickTime: state => {
    return new Date(state.lastClickTime)
  }
}

const actions = {
	syncUpdateTime: ({ commit }, payload) => {
    commit("updateLastClickTime", payload)
  },
  asyncUpdateTime: ({ commit }, payload) => {
    setTimeout(() => {
      commit("updateLastClickTime", payload)
    }, Math.random() * 5000)
  }
}

const store = new Vuex.Store({
  state,
  getters,
  mutations,
  actions
})

const { mapActions, mapGetters } = Vuex;

// Vue 
const vm = new Vue({
	el: '#container',
  store,
  computed: {
  	...mapGetters([
    	'getLastClickTime'
    ])
  },
  methods: {
  	...mapActions([
    	'syncUpdateTime',
      'asyncUpdateTime'
    ]),
    updateTimeSyncTest () {
    	this.syncUpdateTime(Date.now())
    },
    updateTimeAsyncTest () {
    	this.asyncUpdateTime(Date.now())
    }
  }
})