使用vue路由器的多组件导航前提取

Question

在导航到我拥有的某些路由之前，尝试找出获取某些数据的最佳方法。

我的路线是：

let routes = [
    {
        path: '/',
        component: require('./views/Home.vue')
    },
    {
        path: '/messages',
        component: require('./views/Messages.vue'),
    },
    {
        path: '/posts',
        component: require('./views/Post.vue'),
    },
    {
        path: '/login',
        component: require('./views/Login.vue')
    },
    {
        path: '/dashboard',
        component: require('./views/Dashboard.vue'),
    }
];

/messages， /posts /dashboard我想获取一些数据，同时显示一个旋转器。

Vue路由器文档建议在路由器之前使用，在导航之前获取

beforeRouteEnter (to, from, next) {
    getPost(to.params.id, (err, post) => {
        next(vm => vm.setData(err, post))
    })
}

但我的问题是，我必须在所有三个视图组件中实现这个获取逻辑吗？由于提取的是相同的数据，我不想在每个组件中重复逻辑。

在我的根组件中没有调用beForeRouteEnter，在那里我有这个

我是vue的新手，这对我来说是个难题。




Answer 1

您是否知道vuex？因为您需要在三个不同的页面上共享相同的数据，这听起来像是vuexstore的工作。基本上，您可以将存储导入路由器，并在存储中而不是在组件上设置数据，然后您可以通过检查存储中数据的状态有条件地获取数据，如果数据已经存在，则不获取。如下所示：

import store from './store'

beforeRouteEnter (to, from, next) {
  if (store.state.post === null) {
    getPost(to.params.id, (err, post) => {
        store.dispatch('setPost', post)
        next()
    })
  }
}

假设您的存储具有名为post的状态和名为setPost的操作。

const store = new Vuex.Store({
  state: { post: null },
  actions: {
    setPost ({ commit }, post) {
      // set the post state here
    }
  }
})