如果页面需要，Vuex API 调用答案

【问题标题】：Vuex API call if page need it如果页面需要，Vuex API 调用
【发布时间】：2020-10-25 09:39:23
【问题描述】：

我有一个 VueJS 项目，我需要在页面需要时加载数据。比如，个人资料页面需要用户的信息，约会页面需要用户的约会数据等。

到目前为止我的解决方案：

我正在检查每个组件的 beforeRouteEnter 函数中的数据。如果数据为空，那么我从 vuex 操作加载数据。这是解决这个问题最糟糕的方法，因为代码总是重复自己。

Profile.Vue：

beforeRouteEnter: async (to, from, next) => {
    if(!store.state.provinces)
        await store.dispatch("getProvinces")
    next()
},

约会.vue

beforeRouteEnter: async (to, from, next) => {
    if(!store.state.provinces)
        await store.dispatch("getProvinces")
    next()
},

我的第二个策略： 我想如果我使用吸气剂而不是状态可能会起作用，但是当我使用吸气剂时，现在数据会在路由后加载。

【问题讨论】：

【解决方案1】：

您可以在相关的 vue 组件中简单地使用 created 方法。您可以查看此链接了解更多详情：https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram

【讨论】：

是的，我这样做了，但创建的方法不是异步函数。即使在获取数据时它也会呈现页面。你没有理解我的问题。我不想检查和获取每个组件中的每个状态变量。如果数据为空，则从服务器获取数据。
您可以在您创建的部分调用您的调度方法。你试过了吗？
是的，但我不想在每个组件中调用调度。如果加载了数据，我不必再次加载数据，对吗？我正在检查数据是否为空并从我的服务器获取。我不想一次又一次地写……
还有另一种解决方案。混入。 yoru 数据来自哪里？如果数据已加载，您是什么意思。你能更好地解释一下自己吗？
我从我的 API 加载数据。很清楚吧？我正在检查 Vuex 中的数据，如果数据为空，那么我从我的 API 服务器获取数据。现在很清楚。所以我不想检查每个组件中是否为 null 的数据。你明白我的意思吗？