Question

我正在使用GraphQL + Apollo + Vue。在这种情况下，用户单击列表中的某个项目，将打开详细信息页面，并且该项目的ID将与$route一起传递。
打开详细信息页面后，将执行GraphQL查询。

问题在于，那时我无法获取查询所需的ID。

如果我要从mounted()调用方法，则可以在那里console.log(id)。我知道我可以在mounted()中以 async 的形式获取GraphQL，但这可能会减慢速度。

代码：

export default {
    name: "CreatePage",
    apolloProvider,
    apollo: {
       detailAlert: {
         query: GET_ALERT_DETAILS_QUERY,
         variables: {
             //this is where I need the id:
             id: this.$route.params.id,
         },
         options: {
            context: {
               headers: {
                  "Content-Type": "application/json",
                  "authorization": CONFIG.accessToken,
               }
            },
         },
         result({ data, loading, networkStatus }) {
             console.log('We got a result!', JSON.stringify(data.alerts[0].value));
             this.detailAlert = data.alerts[0].value;
         },
         // Error handling
         error(error) {
              console.error('We got an error!', error)
         },
      },
   },
data() {
    return {
    ....
    id: this.$route.params.id,   //this is where it's set
    },
}
methods: {
    getAlertDetail() {
        console.log(this.id)  //I am able to see it here  
    }
},
mounted() {
    this.getAlertDetail();
},

是否可以在mounted()之前获取ID？

Answer 1

您有两种方法来加载某些id的数据：
1.您可以使用beforeRouteEnter()钩子（和beforeRouteUpdate()）。
2.您可以在created()挂钩中加载数据。

在第一种情况下，用户等待加载数据的时间，在第二种情况下，用户可以看到具有默认数据的页面，而在加载数据后，您的真实数据用户将看到页面的重新呈现部分。

常规信息在Vue route Data fetching文档中。

Vue应用程序生命周期：需要来自路由的参数（用于graphQL查询）

1 个答案: