Как правильно получить данные из API в vuex?

Question

Я работаю над своим приложением Vue.js и испытываю трудности с извлечением данных через API с помощью vuex-router-sync.

Как я видел в каждом учебнике или образце, обычным явлением является отправка действия магазина на крючок компонента created. В моем случае это не похоже на выбор, и вот почему:

Я использую стандартный маршрутизатор vue для моей маршрутизации, и когда я перемещаюсь между страницами, меняет не только мой контент, но также мою боковую панель и заголовок , Таким образом, я реализовал концепцию имени маршрутизатора просмотра, такой как

routes: [{ 
     path: '/', 
     components: { 
     page: Home, 
     sidebar: GeneralSidebar, 
     header: HomeHeader 
     } 
    }, { 
     path: '/game/:id', 
     name: 'game', 
     components: { 
     page: Game, 
     sidebar: GameSidebar, 
     header: GameHeader 
     } 
    }] 

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

Я пытался зацепить самого маршрутизатора, на beforeEnter, но встал вопрос, что при переходе между теми же маршрутами (в моем случае от /game/1 к /game/2) не запускает beforeEnter.

Есть ли способ, которым я могу подключиться по телефону любой маршрут навигация? Или, может быть, лучшая модель для отправки действий-извлечения?

Заранее благодарен!

Answer 1

Существует много способов сделать это. Например, вы можете извлекать данные внутри некоторого компонента, который загружается изменением маршрута и после установки данных в vuex путем отправки изменений. Это прекрасно работает. Также имейте в виду, что есть несколько способов извлечения данных внутри любого компонента - вы можете подключить это к любому из крючков жизненного цикла Vue. Посмотрите здесь https://router.vuejs.org/en/advanced/data-fetching.html

Также иногда вам нужны данные перед любым изменением маршрута, и здесь вы можете использовать тот же подход - сделайте запрос при загрузке приложения Vue.