《全局数据管理bug-值与地址》

前提：

我们在Money.vue里，通过recordList=store.recordList ，这个data是从存储库里取出来的，他是一个数组，所以他们共用一个地址。所以我在store里对store.recordList进行增删改查时，我的vue实例的数据recordList也会随着改变。

但是如果store里的数据不是对象，而是基本数据类型的数据呢？

我们知道，如果是基本数据类型，如字符串，数字等，传递时是复制值的。

如：如果在store里声明一个数字，

const store={
    count:0,
    addCount(){
        this.count+=1
    },
    ...recordStore,
    ...tagStore
}

然后在Money里，

export default class Money extends Vue{
        count=store.count
        add(){
            store.addCount()
            console.log(store.count);
        }

把store.count赋值给自己的data，然后点击一个按钮调用add。发现页面里展示的count，没有变，还是0.

因为这是值传递，改变的只是store里的count。

那怎么做能同步呢？使得修改store.count，我这个实例上的count也会跟着改变呢？

不要用data获取，因为data只会获取一遍，后边的就不会再更新了

用computed计算属性

@Component({
        components: {FormItem, Type, Tags, NumPad},
        computed:{
            count(){
                return store.count
            }
        }
})

在ts里，computed写在@Component里。

我这个count是一个计算属性，他的值是返回store.count的值。但是点击之后，页面上的0还是没有加1 .

因为Vue并没有监听store对象，所以改变store，Vue并不知道。那就把store写在data里，

import store from "@/store/index2.ts"
  export default{
    data(){
      return {
        store:store,
      }
    }
  }

为了不重复，我们把它放在App.vue里，这样Vue就监听了store对象。

这样做了以后，点击按钮，成功加1.

之后为了方便，不管是对象，还是基本的数据类型，我们都放在计算属性里，然后全局监听store对象。