vue.js - 将 "data"部分中的变量声明为 $root 的别名不是 react 性的

Question

我在 ma​​in.js 中声明变量:

data: {
  globalData: {}
}

我想避免一直使用 this.$root.globalData — 所以我在组件中使用局部变量作为“全局变量”的别名:

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

然后我在 ma​​in.js 中从服务器获取全局变量(通过 setTimeout 模拟):

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

并且 localAlias 保持等于初始值。

如何让它发挥作用？我还不需要 Vuex，我只是从服务器获取数据并以只读方式使用它。

Example

Answer 1

您可以使用computed 代替data。它会解决您的问题。

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

我已经更新了 example