关于vuex的数据不直接给data而要通过computed

# 为什么vuex的数据不直接给data而要通过computed计算

## 疑惑

其实一直以来使用vue的状态管理vuex都有一个疑惑，文档中介绍，vue的状态数据`$store.state.xx`的在组件中的使用通常都是通过组件的计算属性computed来使用如下:

```javascript

const Counter = {

  template: `<div>{{ count }}</div>`,

  computed: {

    count () {

        return this.$store.state.count

    }

  }

}

```

虽然一直这么用 但是还是奇怪为啥这种下面这中方式为啥行不通：

```javascript

const Counter = {

  template: `<div>{{ count }}</div>`,

  data() {

    return {

        count: this.$store.state.count

    }

  }

}

```

上面这种形式，如果另外一个组件修改了`$store.state.count`的值，视图中count是不会发生变化的

## 解惑

最近又重新了解下vue的基本原理，vue是通过`Object.defineProperty()`，来给vue实例化的对象$vm挂载数据(vue实例化传入的data对象)，然后通过setter方法监控数据变化进而操作dom实时地改变了视图。

```javascript

var obj = {};

var initValue = 'hello';

Object.defineProperty(obj,"newKey",{

    get:function (){

        //当获取值的时候触发的函数

        return initValue;    

    },

    set:function (value){

        //当设置值的时候触发的函数,设置的新值通过参数value拿到

        initValue = value;

        // vue中  这里操作dom 修改视图 代码若干(详见源码)

        // ...

    }

});

//获取值

console.log( obj.newKey );  //hello

//设置值

//因为这一步赋值,触发了set函数  因此dom发生改变

obj.newKey = 'change value';

console.log( obj.newKey ); //change value

```

通过上面对`Object.defineProperty()`的理解，大概可以看出：

在实例化vue对象的时候会把data初始数据挂载化到vue上，所以`data() {

    return {

        count: this.$store.state.count

    }

  }` 只是把`$store.state.count`的初始值赋给了`$vm.count`，是能在视图中显示出初始值的。

  但是当 `$store.state.count`发生改变，实际上`$vm.count`还是原来的初始值没有任何变化，所以视图就不能响应了！因此视图中需要使用计算属性computed根据状态计算出新的结果。

  另外视图中直接用`$store.state.count`也是可以的。