javascript - 在其布局完全安装在 Nuxt 中后呈现页面

Question

我正在为我的管理页面使用布局，该布局将用户信息放入布局中，因此我不必在每次页面更改时查询用户信息。

但是，问题是，当我在布局中查询用户信息时，页面没有等待布局加载。

myLayout.vue

beforeMount() {
    // getting user info from the server by Vuex action
}

myPage.vue

layout: "myLayout"
...
mounted() {
    // bring user info from the Vuex store
}

在这种情况下，我希望beforeMount在myLayout.vue中完成，

但是 myPage.vue 不会等待并在 Vuex 操作完成之前得到 mounted。

所以生命周期是

layout's beforeMount -> page's beforeMount -> page's mounted -> layout's mounted

因为页面不等待布局的 beforeMount 完成。

有没有一种方法可以防止在安装布局之前安装页面？

Answer 1

您可以在布局上使用中间件，它几乎会在布局之前运行，因此在您的页面之前运行。

export default {
  ...
  async middleware({ store }) {
    await store.dispatch('fetch-some-data-with-vuex')
  },
  ...
}

更多信息在这里:https://nuxtjs.org/docs/2.x/directory-structure/middleware/