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

Question

我是 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 已经加载了下一个组件。

Answer 1

首先，您的操作应执行任何状态突变，例如将 user.get_user 设置为 null。我也不确定你为什么要添加 watch;您的操作只有在完成后才能解决。例如

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

中建议的方法

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

Vue-Router Data Fetch: Fetch Data before 'beforeRouteUpdate' loads component

javascript

vue-router

axios

vuex

vuejs2