爲什麼要使用computed而不是data獲取vuex中的state

最近在學習vuex時，照着官網最基本的 Vuex 記數應用示例敲的時候遇到了這樣一個問題
想實現的效果：

點擊加號、減號實現數字增減
vuex設置：

Vue.use(Vuex);
//這裏直接把vuex寫入vue的原型鏈，實際上還有更加規範的寫法，這裏只是方便演示
Vue.prototype.$store = new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        increment: state => state.count++,
        decrement: state => state.count--
    }
});

vue組件：

<template>
    <div>
        <div>
            {{count}}
        </div>
        <div>
            <button v-on:click="add()">+</button>
            <button v-on:click="reduce()">-</button>
        </div>
    </div>
</template>

<script type="text/javascript">
    export default {
        data(){
            return {
                count: this.$store.state.count
            }
        },
        methods: {
            add(){
                this.$store.commit('increment');
                console.log(this.count);
            },
            reduce(){
                this.$store.commit('decrement');
                console.log(this.count);
            }
        }
    }
</script>

發現點擊按鈕頁面上的數字並沒有發生變化，最後參考官網示例發現應該這樣在vue組件中獲取vuex的state

<script type="text/javascript">
    //其餘部分和上一段代碼一樣
    export default {
        computed: {
            count () {
                return this.$store.state.count
            }
        },
        methods: {
            add(){
                this.$store.commit('increment');
                console.log(this.count);
            },
            reduce(){
                this.$store.commit('decrement');
                console.log(this.count);
            }
        }
    }
</script>

那爲什麼要使用computed而不是data獲取vuex中的state呢？
這是因爲data 中的內容只會在 created 鉤子觸發前初始化一次，具體來說就是data中設置count: this.$store.state.count 則count的值是created鉤子執行前this.$store.state.count的值，賦值之後屬性的值就是純粹的字面量，之後this.$store.state.count 如何變化均影響不到count的取值。就如同下面這段代碼

var b = 1;
var a = b;
b = 2;

執行之後a的值依然是1，如此一來我們通過this.$store.commit() 方法來改變state狀態就不會改變count的取值。而且一般我們使用data時也是直接將data賦予一個新值，vue的雙向綁定機制會更新視圖。
而 computed 則是通過【依賴追蹤】實現的，計算屬性在它的相關依賴發生改變時會重新求值（可參考vue官方教程對計算屬性的描述），所以你可以使用 computed 去引用 Vuex 狀態變量，從而使得依賴追蹤生效