JSFiddle - React, Tailwind, and code Playground

by simati

HTML

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuex"></script>
<div id="app">
  <p>{{ count }}</p>
  <p>
    <button @click="shuffle">shuffle</button>
    <button @click="pop">pop</button>
  </p>
</div>

Babel + JSX

// make sure to call Vue.use(Vuex) if using a module system

const store = new Vuex.Store({
  state: {
    list: [1,2,3,4]
  },
  mutations: {
  	shuffle: state => state.list[0] = state.list[3],
    pop: state => state.list.pop()
  }
})

new Vue({
  el: '#app',
  computed: {
    count () {
	    return store.state.list
    }
  },
  methods: {
    shuffle () {
      store.commit('shuffle')
    },
    pop () {
    	store.commit('pop')
    }
  }
})