SOURCE

// 初始化 vuex 实例（可以将这个放到其他文件里面去））
const store = new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        increment: state => state.count++,
    },
    actions: {
        // context 对象的使用跟 store 对象的使用类似
        increment(context) {
            // 直接可以 commit（原来是this.$store.commit）
            context.commit("increment")
        },
        // { commit }就是 context
        Aincrement({
                           commit
                       }) {
            setTimeout(() => {
              			alert("延迟了5秒")
                    commit("increment")
                },
                5000)
        }
    }
})


// 初始化子组件
const Counter = {
    template: `<p>{{ count }}</p>`,
    computed: {
        count() {
            return store.state.count
        }
    }
}

// 初始化vue实例
const app = new Vue({
    el: "#app",
    // 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件
    store,
    components: {
        Counter
    },
    template: `
		<div class = "app" > 
			<button @click="increment">+</button>
     <button @click="Aincrement">+(async)</button>
		 <counter > </counter>
    </div > `,
    methods: {
        ...Vuex.mapActions([
          'increment','Aincrement']),
        // ...mapActions({
        //     "increment": "increment"
        // })
    }
})

<div id="app" class="app">
</div>

.app {
  background-color: #ffffff
}