JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/2.0.0-rc.3/vuex.js"></script>
<div id="app">
<div>count: {{ count }}</div>
<button @click="click">Increment Async</button>
</div>
Babel + JSX
const store = new Vuex.Store({
state: { count: 0 },
actions: {
incrementAsync(state, data) {
alert(data)
state.commit('increment')
}
},
mutations: {
increment(state) {
state.count += 1
}
}
})
const { mapActions, mapState } = Vuex
new Vue({
el: '#app',
data: {
},
computed: mapState({
count: state => state.count
}),
methods: {
click() {
this.increment('hi')
},
...mapActions({
increment: 'incrementAsync'
})
},
store
})