SOURCE

console 命令行工具 X clear

                    
>
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>