如何在子路由中删除重复数据提取>>

Question

想象以下路线。我现在正在使用Vue和vue-router语法，但我认为这个问题也适用于其他SPA框架。

{
    path: 'user/:id', component: require('User.vue'),
    children: [
        { path: 'edit', component: require('UserEdit.vue'), }
    ]
}
在User.vue中，在创建组件时使用route id参数获取用户对象：

data() {
    return { user: null }
},

created() {
    this.user = fetchUser(this.$route.params.id)
}
在UserEdit.vue中，还将提取用户，在85％的情况下，这也是在User.vue中也被提取的用户：

data() {
    return { user: null }
},

created() {
    this.user = fetchUser(this.$route.params.id)
}
问题

：如果我们要从User.vue导航到UserEdit.vue，则很明显（很可能）将再次获取同一用户对象。如何避免这种代码重复？我应该如何将先前获取的数据传递到子路由？

我想我应该在某处检查路由参数是否相等，因为如果它们不相等，我们正在编辑另一个用户，并且无论如何都应该获取用户数据...

状态管理商店（如vuex）的时间？如果是这样，当应用程序离开用户页面导航时，应该清除用户存储，还是将最后一个获取的用户始终保留在内存中？

我很难拿出干的东西。

期待您的建议和一些动手代码示例。

想象以下路线。我现在正在使用Vue和vue-router语法，但我认为这个问题也适用于其他SPA框架。 {path：'user /：id'，component：require（'User.vue'），...

Answer 1

使用vuex进行状态管理。例如，设置可以从任何组件访问的lastUser和userData之类的内容。然后fetchUser将成为商店中的动作：