如何在vuex中从API正确获取数据？

Question

我正在处理我的Vue.js应用程序，并且在使用vuex-router-sync通过API获取数据时遇到了麻烦。

正如我在每个教程或示例中看到的那样，在created组件钩子上调度存储操作是很常见的。 在我的情况下，它似乎不是一个选项，这就是为什么：

我使用标准的vue-router进行路由，当我在页面之间导航时，不仅我的内容应该改变，而且我的侧边栏和标题也是如此。 因此我实现了命名的路由器视图概念，例如

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

但Game，GameHeader和GameSidebar应该为当前选择的游戏共享相同的吸气剂。 无法确定这些组件中的哪一个应该调度获取数据的操作。

我试图挂在路由器本身，在beforeEnter ，但遇到问题，在相同的路由之间导航（在我的情况下从/game/1到/game/2 ）不会触发beforeEnter 。

有什么方法可以挂钩任何路线导航？ 或者可能是一个更好的模式来调度fetch-actions？

提前致谢！

Answer 1

有很多方法可以做到这一点。 例如，您可以获取通过路由更改加载的某个组件内的数据，以及通过调度更改将数据设置为vuex之后的数据。 这完美地完成了这项工作。 还要记住，在任何组件内部获取数据的方法很少 - 您可以在任何Vue生命周期钩子中挂钩。 看看这里https://router.vuejs.org/en/advanced/data-fetching.html

有时候你需要在任何路由更改之前预先获得一些数据，这里你可以使用相同的方法 - 在加载Vue应用程序时提出一些请求。