如何避免在子路由中重复获取数据

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）的时间？如果是这样，当应用程序离开用户页面导航时，应该清除用户存储，还是将最后一个获取的用户始终保留在内存中？

我很难拿出干的东西。

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

Answer 1

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

商店

state: {
  lastUser: '',
  userData: null
},
actions: {
  fetchUser({ state }, user) {
    if (state.userData && user == state.lastUser) {
      return state.userData;
    } else {
      // Api call, set userData and return it
    }
  }
}

用户

async created() {
  this.user = await this.$store.dispatch('fetchUser', this.$route.params.id);
}

UserEdit

async created() {
  this.user = await this.$store.dispatch('fetchUser', this.$route.params.id);
}