代码
提交代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <div>购物车数量:{{count}}</div> <button @click="addAsync">添加</button> </div> </body> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vuex@3.1.2/dist/vuex.js"></script> <script type="text/javascript"> function getData() { return new Promise((resolve, reject) => { setTimeout(() => { console.log('getData success') resolve() }, 1000) }) } function getOtherData() { return new Promise((resolve, reject) => { setTimeout(() => { console.log('getOtherData success') resolve() }, 2000) }) } const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment(state) { state.count++ } }, actions: { async actionA ({ commit }) { commit('increment', await getData()) }, async actionB ({ dispatch, commit }) { await dispatch('actionA') // 等待 actionA 完成 commit('increment', await getOtherData()) } } }) var vm = new Vue({ el: '#app', store, methods: { addAsync() { this.$store.dispatch('actionB') }, }, computed: { count() { return this.$store.state.count } } }) </script> </html>
运行结果