如何使Vue子组件识别axios已完成在Vue $ root组件上的加载?

时间:2018-08-14 12:45:39

标签: asynchronous vue.js axios vue-reactivity

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

  • -main.js(=根)
  • -App.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
}

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

我很清楚其他方法,例如“事件总线”,“ props”或“ VueX”,但我不希望将对话框与$ root组件一起使用,并学习如何对异步产生反应-如果那样的话在这种情况下完全有可能。

1 个答案:

答案 0 :(得分:1)

我不确定100%,但是在您的情况下,让子组件中的navItems可以使用计算属性:

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

这里有个例子:http://jsfiddle.net/eywraw8t/268423/