Выборка перед навигацией с несколькими компонентами с использованием vue-router

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-router предлагают использовать beforeRouteEnter, Выборка перед навигацией

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

Но мой вопрос заключается в том, должен ли я реализовать эту логику выборки во всех трех моих компонентах представления?Поскольку извлекаются одни и те же данные, я не хочу повторять логику в каждом компоненте.

beforeRouteEnter не вызывается в моем корневом компоненте, где у меня есть это <router-view></router-view>, иначе я чувствую, что это было бы лучшим местом для этой логики.

Я действительно новичок в Vue, и этот действительно крепкий орешек для меня.

Answer 1

Вам известно о vuex? Так как вам нужно делиться одними и теми же данными на трех разных страницах, что звучит как работа для магазина vuex. По сути, вы можете импортировать store в свой маршрутизатор и установить данные в хранилище, а не в компоненте, а затем вы можете условно извлечь данные, проверив состояние данных в хранилище, и если данные уже существуют, не принеси. Примерно так:

import store from './store'

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

Предположим, что у вашего store есть состояние с именем post и действие с именем setPost.

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