~~~ <template> <div> <p>click {{count}} times, count is {{evenOrOdd}}</p> <button @click="increment">+</button> <button @click="decrement">-</button> <button @click="incrementIfOdd">increment if odd</button> <button @click="incrementAsync">increment async</button> </div> </template> <script> import {mapState, mapGetters, mapActions} from 'vuex' export default { name: 'Hello', mounted () { console.log(this.$store) }, //方式1 // computed: { // count () { // return this.$store.state.count // }, // evenOrOdd () { // return this.$store.getters.evenOrOdd // } // }, // methods: { // increment () { // this.$store.dispatch('increment') // }, // decrement () { // this.$store.dispatch('decrement') // }, // incrementIfOdd () { // this.$store.dispatch('incrementIfOdd') // }, // incrementAsync () { // this.$store.dispatch('incrementAsync') // } //} //方式2 computed: { ...mapState(['count']), ...mapGetters(['evenOrOdd']) }, methods: { ...mapActions(['increment', 'decrement', 'incrementIfOdd', 'incrementAsync']) } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> </style> ~~~