Javascript Vuex API调用（如果页面需要）

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

我目前的解决方案：

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

简介.Vue：

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

www.vue

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

我的第二个策略：

---

我想，如果我使用getter而不是states，可能会起作用，但当我使用getter时，现在数据会在路由后加载。

您只需在相关的vue组件中使用created方法即可。您可以查看此链接以了解更多详细信息：

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