JSFiddle - React, Tailwind, and code Playground

by ecoblack

HTML

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuex"></script>
<div id="app">
  <p>{{ hp }} </p>
  <p>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
     <button @click="addItem(id)">Add item</button>
  </p>

</div>

Babel + JSX

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

const store = new Vuex.Store({
  state: {
  	hp: 343,
    count: 0,
    picked: '',
    dat: {"ok": 'name', "number": 9}
  },
  mutations: {
  	increment: state => state.dat[number]++,
    decrement: state => state.dat[number]--,
    addItem: state => state.hp += 800 
    }
})

new Vue({
  el: '#app',
  computed: {
    count () {
	    return store.state.count
    },
        dat () {
     return  store.state.dat
    },
    datCamelToe () {
    return  store.state.dat.number * 9
    },
    picked () {
    	return store.state.picked
    },
    hp () {
    return store.state.hp
    }
  },
  methods: {
    increment () {
      store.commit('increment')
    },
    decrement () {
    	store.commit('decrement')
    },
    addItem() { store.commit('addItem')}
  }
})