JSFiddle - React, Tailwind, and code Playground

by mizobata

HTML

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuex"></script>
<div id="app">
  <p>{{ count }}</p>
  <p>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </p>
  <p>Look at the console!</p>
</div>

Babel + JSX

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

const store = new Vuex.Store({
  state: {
    count: 0
  },
  actions: {
  	test: async (context) => {
    		return new Error('error from action "Test"!')
    },
  },
  mutations: {
  	increment: state => state.count++,
    decrement: state => state.count--
  }
})

new Vue({
  el: '#app',
  store,
  computed: {
    count () {
	    return store.state.count
    }
  },
  mounted () {
  	this.$store.dispatch('test')
    	.then(result => {
      	console.log('result: ', result)
      })
      .catch(error => {
      	console.log('error: ', error)
      })
  },
  methods: {
    increment () {
      store.commit('increment')
    },
    decrement () {
    	store.commit('decrement')
    }
  }
})

Vue.config.productionTip = false