console
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
incrementAsync ({ commit }) {
setTimeout(() => {
commit('increment')
}, 1000)
}
}
})
Vue.component('btn1', {
template: '<button @click="increment">{{count}}</button>',
computed: {
count() {
return this.$store.state.count
}
},
methods: {
increment() {
this.$store.commit('increment')
}
}
})
Vue.component('btn2', {
template: '<button @click="asyncAction">{{count}}</button>',
computed: {
count() {
return this.$store.state.count
}
},
methods: {
asyncAction() {
this.$store.dispatch('incrementAsync')
}
}
})
Vue.component('myp',{
template: '<p><btn1></btn1><btn2></btn2></p>'
})
Vue.component('wrap',{
template: '<div>{{count}}<br><myp></myp></div>',
computed: {
count() {
return this.$store.state.count
}
}
})
let app = new Vue({
el:'#app',
store,
template: '<wrap></wrap>'
})
<script src="https://cdn.bootcss.com/vue/2.2.6/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vuex/2.3.1/vuex.min.js"></script>
<div id="app">
</div>