Vue中在data内声明$root别名无响应，如何实现响应式？

我最近碰到这么个问题：在main.js里声明了全局数据：

data: { globalData: {} }

为了避免每次都写冗长的this.$root.globalData，我在组件的data里给它加了个本地别名：

data() { 
  return { 
    localAlias: this.$root.globalData, 
  } 
}

之后我用setTimeout模拟从服务器异步获取数据并更新全局变量：

create() { 
  window.setTimeout(() => { 
    this.globalData = {a:1, b:2}; 
  }, 1500); 
}

结果发现组件里的localAlias始终保持初始的空对象，完全没跟着更新。我暂时不想用Vuex，而且只是需要只读使用这份数据，该怎么解决呢？

简单有效的解决方案：用计算属性替代data里的本地变量 #

核心问题在于，你初始化时把this.$root.globalData的引用赋值给了localAlias，但后来你直接替换了this.globalData的整个对象（从空对象换成了新的{a:1,b:2}），这时候localAlias还是指向原来的空对象，自然不会更新。

换成计算属性就完美解决了，因为计算属性是响应式的，每次访问都会去取最新的全局数据引用：

computed: {
  localAlias() {
    return this.$root.globalData;
  }
}

之后在模板或者组件逻辑里用this.localAlias，就能自动同步全局数据的更新了，完全符合你只读使用的需求。

额外小技巧（可选） #

如果觉得this.$root还是有点麻烦，也可以在main.js里把全局数据通过provide提供出去，然后在组件里用inject接收，再结合计算属性使用，不过对于简单场景来说，直接用计算属性已经足够简洁啦。

内容的提问来源于stack exchange，提问作者TotalAMD