Javascript Vuejs在呈现数据之前同步请求

我有一个需要身份验证的单页应用程序。当用户通过身份验证，然后访问某些页面或点击浏览器中的“重新加载”按钮时，它将请求提供其身份验证数据的api。然后我有一个类似这样的错误：

{{ $root.authData ? $root.authData.name : null }}

[Vue warn]：计算表达式“auth.name”时出错：TypeError:无法读取null的属性“name”（在组件中找到）：

导致此错误的原因是，对api的请求尚未完成时，vue render对数据进行身份验证

在vue呈现验证数据之前，是否可以让vue等待请求api直到首先完成

只是更清楚这里发生了什么。代码如下：

// main.js
import Vue from 'vue'
import App from './App.vue' // root vue
import store from './vuex/store' // vuex
import router from './router' // my router map

sync(store, router)
router.start(App, '#app')
// end main.js



// App.vue
<template>
  <main>
    <div class="wrapper">
      <router-view></router-view>
    </div>
  </main>
</template>

<script>
  import authService from './services/auth' // import authservice

  ready () {
    // here is code that should be done first before vue render all authData
    auth.getUser((response) => {
      self.authData = response
    })
  },
  data () {
    return {
      authData: null // default is null until the api finish the process
    }
  }
</script>
// end App.vue



// SomeRouterComponents.vue
<template>
  <!-- some content -->
  <div>
    // always got error: cannot read property 'name' of null
    // here I expect to render this after api has been resolved
    {{ $root.authData.name }}
  </div>
  <!-- some content -->
</template>

//main.js
从“Vue”导入Vue
从“./App.vue”导入应用程序//根vue
从'./vuex/store'//vuex导入存储
从“./路由器”//我的路由器映射导入路由器
同步（存储、路由器）
路由器启动（应用程序“#应用程序”）
//end main.js
//App.vue
从“./services/auth”导入authService//导入authService
就绪（）{
//以下是在vue呈现所有authData之前应首先执行的代码
auth.getUser（（响应）=>{
self.authData=响应
})
},
数据（）{
返回{
authData:null//在api完成该过程之前，默认值为null
}
}
//结束App.vue
//一些路由组件。vue
//始终出现错误：无法读取null的属性“name”
//在这里，我希望在api被解析后呈现它
{{$root.authData.name}

正如您所说，问题是您试图访问一个不存在的对象，并且由于该错误，Vue无法在下一次勾选中呈现该对象。解决方案是使用一个简单的

v-if

检查数据是否已加载，这仅适用于反应性数据

根组件

  import auth from './services/auth' // import authservice

  ready () {
    // here is code that should be done first before vue render all authData
    auth.getUser((response) => {
      self.authData = response
      self.dataReady = true
    })
  },
  data () {
    return {
      authData: null, // default is null until the api finish the process
      dataReady: false
    }
  }

  <div v-if="dataReady">
    // note that if you use v-show you will get the same error
    {{ $root.authData.name }}
  </div>
  <div v-if="!dataReady">
    // or some other loading effect
    Loading...
  </div>

其他组件

  import auth from './services/auth' // import authservice

  ready () {
    // here is code that should be done first before vue render all authData
    auth.getUser((response) => {
      self.authData = response
      self.dataReady = true
    })
  },
  data () {
    return {
      authData: null, // default is null until the api finish the process
      dataReady: false
    }
  }

  <div v-if="dataReady">
    // note that if you use v-show you will get the same error
    {{ $root.authData.name }}
  </div>
  <div v-if="!dataReady">
    // or some other loading effect
    Loading...
  </div>

//请注意，如果使用v-show，则会出现相同的错误
{{$root.authData.name}
//或者其他一些负载效应
加载。。。

---

我使用了

v-if=“！dataReady”

而不是

v-else

，因为它在Vue 2.0中将被弃用，您可以阻止Vue尝试访问对象属性，如下所示：

{{ $root.authData ? $root.authData.name : null }}

---

在某些情况下，您甚至可以为

加载…

消息更改

null

。

您可以在启用

waitForData

选项的情况下使用

数据转换挂钩

：

<script>
  import authService from './services/auth'

  export default {
    route: {
      waitForData: true, // wait until data is loaded

      data (transition) {
        authService.getUser((response) => {
          transition.next({ authData: response }) // set data
        })
      }
    },

    data () {
      return {
        authData: null
      }
    }
  }
</script>

从“./services/auth”导入authService
导出默认值{
路线：{
waitForData:true，//等待数据加载
数据（转换）{
authService.getUser（（响应）=>{
transition.next（{authData:response}）//设置数据
})
}
},
数据（）{
返回{
authData:null
}
}
}

此外，如果不想使用该选项，可以使用

$loadingRouteData

属性检查是否加载了数据

详情如下：

---

您应该发布代码。我认为没有必要去synchronously@YerkoPalma我正在使用vue路由器和vuex。目前，我在App.vue at ready（）@yerkoplma中将代码（用于请求api）放入App.vue at ready（）@yerkoplma在遇到此问题之前，我的代码类似于一般的单页应用程序项目。只需更新我的问题相关：另外，尝试使用另一个循环挂钩，而不是

ready

，因为在呈现DOM时调用ready，并且您希望在该事件之前使用该代码。如果我调用main.js中的authService如何。比如：

auth.getUser（null，（response）=>{router.start（App，'.#App'）}

然后在App.vue中使用以下命令接收auth数据：

this.authData=auth.user

我只是尝试一下，并按照预期工作。但我不确定这是否是一个好的解决方案，因为如果我使用你们给出的解决方案。它在每个routerComponent中都有许多v-if=“dataReady”。