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应用程序时提出一些请求。

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

1 个答案: