Firebase выборка на Nuxtjs перед рендерингом

Question

У меня есть проект vuejs + firebase.

У меня есть три модуля магазина vuex, которые back, common, front Структура папок моего магазина выглядит следующим образом:

src / store

├───back
│   └───index.js
├───common
│   └───index.js
├───front
│   └───index.js

Без nuxtjs я могу получать уведомления пользователей, подобные этому

    fetchUserNotifications({commit, getters}) {
        let getUser = store.getters["common/getUser"];
        return firebase
            .database()
            .ref("users/" + getUser.id)
            .child("notifications")
            .limitToLast(5)
            .on("value", snapshot => {
                commit("setUserNotifications", snapshot.val());
            });
    },

Но с nuxt js getUser возвращает неопределенное значение, я думаю, это потому, что мне нужно получить данные дорендеринг.Я также добавил

setTimeout(() => console.log(store.state.front.user), 5000);

, но каждый раз результат равен нулю.Когда я проверяю Vuejs Developer Tools на Chrome, все выглядит нормально и мои данные там.

Я искал документы и нашел nuxtServerInit(), но не мог понять, как его использовать.

Честно говоря, я не мог понять nuxtjs, и мне нужна помощь для извлечения данных, как проект не-nuxtjs.

Answer 1

Насколько я понимаю, ваш вопрос касается, прежде всего, того, как настроить модули магазина в NuxtJS.Вот краткий пример того, как я мог бы настроить модуль корневого хранилища на основе того, что вы уже рассказали о настройке и получении пользователя и обработке функции nuxtServerInit в действии корневого хранилища:

// store/index.js

export const state = () => ({
  user: null,
  userNotifications: null
})

export const mutations = {
  setUser(state, userData) {
    state.user = userData
  },

  setUserNotifications(state, userNotifications) {
    state.userNotifications = userNotifications
  }
}

export const getters = {
  getUser (state) {
    return state.user
  }
}

export const actions = {
  nuxtServerInit ({ commit }) {
    return httpClient.get('/url/to/get/user/data')
      .then(({ data }) => {
        commit('setUser', data)
      })
  }
}


// where you fetch notifications in a component or page
fetchUserNotifications({commit, getters}) {
  let user = this.$store.getters.getUser();
  return firebase
    .database()
    .ref('users/' + user.id)
    .child('notifications')
    .limitToLast(5)
    .on('value', snapshot => {
      commit('setUserNotifications', snapshot.val());
    });
},
...

Если у вас есть какие-либо вопросы, обратитесь к документации NuxtJS по режиму модуля с хранилищем Vuex: https://nuxtjs.org/guide/vuex-store