上一節我們是直接用 $store.state.count 來訪問store狀態的，現在我們是想處理一下，然後直接用 count 來呼叫：
第一種方法：用vue的computed計算屬性，在Count.vue

<template>
    <div>
        <h1>{{ msg }}</h1>
        <!--直接引用store裡的資料-->
        <h2>{{ $store.state.count }}--{{ count }}</h2>
        <!--提交store裡mutations內的方法-->
 

        <button @click="$store.commit('add')">+</button>
        <button @click="$store.commit('reduce')">-</button>
    </div>
</template>

<script>
    import store from '@/vuex/store'
    export default {
        data(){
            return {
                msg: 'Hello Vuex!'
 

            }
        },
        computed:{
            count(){
//注意要加this
                return this.$store.state.count;
            }
        },
        //將store新增到例項
        store
    }
</script>

<style></style>

第二種方法：通過vuex的mapState

<script>
    import store from '@/vuex/store'
 

    //注意mapState要加 {}
    import { mapState } from 'vuex'
    export default {
        data(){
            return {
                msg: 'Hello Vuex!'
            }
        },
        //同樣是計算屬性
        computed:mapState({
            //es6寫法
            count:state => state.count
        }),
        //將store新增到例項
        store
    }
</script>

其他和第一種一樣

第三種：

<script>
    import store from '@/vuex/store'
    //注意mapState要加 {}
    import { mapState } from 'vuex'
    export default {
        data(){
            return {
                msg: 'Hello Vuex!'
            }
        },
        computed:mapState(['count']),
        //將store新增到例項
        store
    }
</script>