Vue-Router 数据获取：在“beforeRouteUpdate”加载组件之前获取数据

Posted 2023-02-23

【中文标题】Vue-Router 数据获取：在“beforeRouteUpdate”加载组件之前获取数据

【英文标题】：Vue-Router Data Fetch: Fetch Data before 'beforeRouteUpdate' loads component

【发布时间】：2019-02-03 19:09:09

【问题描述】：

我是 vue-router 导航守卫的新手，所以我最近意识到我需要使用beforeRouteUpdate 守卫来重用组件，例如：从/foo/1 转到/foo/2

但是，在来到/foo/1 时，我通过 axios 调用从数据库中提取数据，在转到 /foo/2 之前，我需要通过 axios 调用再次提取新数据。

这是我面临的问题，导航守卫beforeRouteUpdate 在我从 axios 调用加载数据之前加载组件/foo/2，因此我的一些变量为空。

如何让beforeRouteUpdate 等待加载下一个组件，以便从 axios 调用中加载我的所有数据？

我的代码是这样的：

beforeRouteUpdate (to, from, next) 
    Vue.set(this.$store.state.user, 'get_user', null)
    this.$store.dispatch(OTHER_PROFILE_GET, to.params.id).then(resp => 
      console.log(resp);
      if(this.$store.getters.is_user_loaded) 

        next()

       else 

        this.$store.watch((state, getters) => getters.is_user_loaded, () => 
        
          if(this.$store.getters.is_user_loaded) 
            console.log(this.$store.state.user.get_user);
            console.log('comes here');
            next()
          
        )
      
    )
, 

为了进一步解释我的代码，我在我的组件中调用了这个方法，所以当我从 /user/1 转到 /user/2 时，我调度了一个 Vuex 操作，该操作会调用 axios 以获取新的配置文件详细信息，但在axios调用完成并加载Vuex状态下的数据，beforeRouteUpdate已经加载了下一个组件。

【问题讨论】：

你的代码是什么样的？你关注the official guide了吗？

我用我的代码更新了我的问题。至于官方指南，我已经浏览了 beforeRouteUpdate 的其他示例以了解其正确使用方法，但无法解决问题@Phil

编辑问题时不要忘记点击“保存编辑”按钮

对不起，我的错。我在评论@Phil

后更新了问题

您应该只通过突变更新状态，而不是直接更新状态（通过Vue.set 或其他方式）

【参考方案1】：

首先，您的操作应该执行任何状态突变，例如将user.get_user 设置为null。我也不确定你为什么添加了一个手表；您的操作应仅在完成后解决。例如

actions: 
  [OTHER_PROFILE_GET] ( commit , id) 
    commit('clearUserGetUser') // sets state.user.get_user to null or something
    return axios.get(`/some/other/profile/$encodeURIComponent(id)`).then(res => 
      commit('setSomeStateData', res.data) // mutate whatever needs to be set
    )
  

那么你的路由守卫应该有类似的东西

beforeRouteUpdate (to, from, next) 
  this.$store.dispatch(OTHER_PROFILE_GET, to.params.id).then(next)
      

---

为了防止错误尝试呈现null 数据，请使用您的getter。例如，假设你的 getter 是

getters: 
  is_user_loaded (state) 
    return !!state.user.get_user
  

在您的组件中，您可以将其映射到计算属性...

computed: 
  isUserLoaded () 
    return this.$store.getters.is_user_loaded // or use the mapGetters helper
  ,
  user () 
    return this.$store.state.user.get_user // or use the mapState helper
  

然后在您的模板中，使用此逻辑有条件地呈现一些数据

<div v-if="isUserLoaded">
  Hello user
</div>
<div v-else>
  Loading...
</div>

这是vue-router guide for beforeRouteUpdate中建议的方法

【讨论】：

我试过这个方法，但是在beforeRouteUpdate加载下一个组件之前它无法获取数据。但是，我的 getter 正在获取一个布尔值来检查配置文件是否加载到 store.state 或它是否为空。据我了解，beforeRouteUpdate 不会重新加载组件，因此在重用组件时，当state 中的数据发生更改时，它会对更改组件中的现有变量做出反应，当数据为空时，它会给出错误

@pk_45 听起来您的模板中需要一些表示逻辑，然后如果它是null，则不要尝试呈现数据。我将添加一个示例

@pk_45 听起来您的操作仅在您的数据被检索后才解决。您是否忘记return axios 承诺（请参阅上面的示例）？

@jean 见vuex.vuejs.org/guide/…

@jeand'arme 我通常不使用它们，但问这个问题的人会这样做，这就是我回答的原因。有关更一般的答案，请参阅What is wrong with magic strings?