Vue路由器数据获取：在“beforeRouteUpdate”加载组件之前获取数据

Question

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

然而，在进入/foo/1时，我通过axios调用从数据库中提取数据，在进入/foo/2之前，我需要通过axios调用再次提取新数据。

这就是我面临的问题，其中导航后卫beForeRouteUpdate加载组件/foo/2之前，我的数据加载从axios调用，因此我得到null在我的几个变量。

如何让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状态加载数据之前，路由更新之前的已加载下一个组件。




Answer 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数据，请使用getters。例如，假设你的吸气器是

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路由器指南中针对路由更新之前的所建议的方法