vuex mapState使用

<template>
    <div>
        {{count}}
        <button @click="handleIncrease">+5</button>
        <button @click="handleDecrease">-5</button>
        <button @click="handleRouter">跳转到 HelloWorld3</button>
        <button @click="showRouter">展示路由</button>
    </div>
</template>

<script>
    import { mapState } from 'vuex'
    export default {
        name: 'HelloWorld2',
        computed: {
            // count(){
            // return this.$store.state.count;
            // },
            //与上面效果一样
 ...mapState({ count: state => state.count })
        },
        methods: {
            handleIncrease() {
                this.$store.commit('increase', 5);
            },
            handleDecrease() {
                this.$store.commit('decrease', 5);
            },
            handleAsyncIncrease() {
                this.$store.dispatch('asyncIncrease');
            },
            handleRouter() {
                this.$router.push('/HelloWorld3');
            },
            showRouter() {
                console.log(this.$router);
                console.log(this.$router.push);
            }
        }
    };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

 

<template><div>{{count}}<button @click="handleIncrease">+5</button><button @click="handleDecrease">-5</button><button @click="handleRouter">跳转到 HelloWorld3</button><button @click="showRouter">展示路由</button></div></template>
<script>import { mapState } from 'vuex'export default {name: 'HelloWorld2',computed: {//count(){//return this.$store.state.count;//},//与上面效果一样...mapState({count: state => state.count})},methods: {handleIncrease() {this.$store.commit('increase', 5);},handleDecrease() {this.$store.commit('decrease', 5);},handleAsyncIncrease() {this.$store.dispatch('asyncIncrease');},handleRouter() {this.$router.push('/HelloWorld3');},showRouter() {console.log(this.$router);console.log(this.$router.push);}}};</script>
<!-- Add "scoped" attribute to limit CSS to this component only --><style scoped>
</style>