代码
提交代码
<!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="increment">添加</button> <button @click="add">别名添加</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"> const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment(state) { state.count++ }, }, actions: { increment({commit}) { commit('increment') } } }) var vm = new Vue({ el: '#app', store, methods: { ...Vuex.mapActions([ 'increment' ]), ...Vuex.mapActions({ add: 'increment' }) }, computed: { count() { return this.$store.state.count } } }) </script> </html>
运行结果