时间戳

首页 > 解决方案 > 如果页面需要，Vuex API 调用

javascript - 如果页面需要，Vuex API 调用

问题描述

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

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

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

配置文件.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()
},

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

标签： javascriptvue.jsasynchronousvuexvue-router

解决方案

You can simply use created method in your related vue component. You can check this link for more detail: https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram

推荐阅读