nuxt.js - nuxtserverinit 和用户登录

Question

我正在开发一个 nuxt 应用程序，需要从 api 获取数据。数据只需要提供给登录用户。在我的 vuex 商店 index.js 中，我编写了以下代码：

async nuxtServerInit({ commit }) {
  if (this.$auth.loggedIn) {
    await Promise.all([
      (async () => {
        const response = await this.$axios.get('api/all/users')

        commit('setUsers', response.data)
      })(),
      (async () => {
        const response = await this.$axios.get('api/all/teams')

        commit('setTeams', response.data)
      })(),
      (async () => {
        const response = await this.$axios.get('api/all/clubs')

        commit('setClubs', response.data)
      })(),
    ])
  }
},

以下工作，并在刷新时加载数据。但是 - 当用户登录时，nuxtserverinit 实际上不会触发，因为没有页面重新加载。处理它的正确方法是什么？

Answer 1

因此，感谢您的帮助，我现在所做的是在登录后立即发送商店操作。所以在我的登录页面中，我做了：

methods: {
  ...mapActions(['getTeams', 'getUsers', 'getClubs']),
  loginUser(loginInfo) {
    this.$auth
      .loginWith('local', {
        data: loginInfo,
      })
      .then(() => {
        this.getTeams()
        this.getUsers()
        this.getClubs()
      })
  },
},

这不需要重新加载页面，因此仍然很快，并且只会在用户登录后加载数据。