asynchronous - 如何让 Vue 子组件识别 axios 在 Vue $root 组件上完成加载？

Question

我的小 Vue 应用程序的基本设置遵循基本的 Vue Cli 3 设置：

• -main.js（=根）
• -- 应用程序.vue
• --- Navigation.vue（这个调用$root）

在 main.js 的 created() 中有这个函数来加载导航菜单的 json：

[...]
data() {
    return {
        navMainItems: null
        staticTestItems: [
            { "id": 0, "title": "test 1, "url": "/" },
            { "id": 1, "title": "test 2, "url": "/" }
        ]
    }
},
created() {
    axios.get('navigation/navAllItems.json')
        .then((response) => {
            this.navMainItems = response.data.navMainItems;
    [...]
}

效果很好。现在我想使用“this.$root”从 Navigation.vue 组件调用该数据：

data(){
  return {
    navItems: null,
    localStaticTestItems: this.$root.staticTestItems
  }
},
created() {
    // Check if static elements loaded
    console.log("sampleNavItems =", this.$root.sampleNavItems)
},
mounted(){
  // This fails, presumably because of asynchonicity
  // Can this be fixed?
  this.navItems = this.$root.navMainItems
}

虽然静态元素加载得很好，但异步加载的 navItems 不会更新。

我很清楚其他方法，如“事件总线”、“道具”或“VueX”，但我不想将对话框与 $root 组件一起使用并学习如何对异步做出反应——如果有的话在这种情况下可能。

Answer 1

我不是 100% 确定，但在您的情况下，navItems在您的子组件中制作一个计算属性可能会起作用：

  computed: {
    navItems() { return this.$root.navMainItems }
  }

这是一个例子：http: //jsfiddle.net/eywraw8t/268423/