Как добавить данные Firebase Firestore в SSR Nuxt Apps Vuex Store - PullRequest
Новая
       18

Как добавить данные Firebase Firestore в SSR Nuxt Apps Vuex Store

0 голосов
/ 21 октября 2018

Я пытаюсь установить местоположение в магазине Vuex в моем приложении Nuxt.Я рассмотрел использование vuexfire , однако я не уверен, будет ли это оптимальным в приложении для БСО или в целом, что является наиболее простой передовой практикой.

Как вы запрашиваете уfirebase firestore и установить состояние («местоположений» в этом примере)?

Было бы лучше использовать nuxtServerInit в приложении SSR?

store / index.js 

import Vuex from 'vuex'
import firebase, {auth, db} from '@/services/firebaseinit.js'

const createStore = () => {
  return new Vuex.Store({
    state: {
      user: null,
      locations: [],
    },
    getters: {
      // User
      activeUser: (state) => {
        return state.user
      },
      // Locations
      loadedLocations(state) {
        return state.loadedLocations
      }
    },
    mutations: {
      // User
      setUser (state, payload) {
        state.user = payload
      },
      // Locations
      setLocations (state, locations) {
        state.locations = locations
      }
    },
    actions: {
      // Locations
      setLocations(vuexContext, locations) {
        vuexContext.commit('setLocations', locations)
      },  

      // Users
      autoSignIn ({commit}, payload) {
        commit('setUser', payload)
      },

      signInWithFacebook ({commit}) {
          return new Promise((resolve, reject) => {
              auth.signInWithPopup(new firebase.auth.FacebookAuthProvider())
              resolve()
          })
      },

      signOut ({commit}) {
          auth.signOut().then(() => {
              commit('setUser', null)
          }).catch(error => console.log(error))
      },

    }
  })
}

1 Ответ

0 голосов
/ 22 октября 2018

Я не использовал vuexfire, но использовал firebase с nuxt, и он работает довольно хорошо.это то, что я сделал.

npm install --save firebase

создайте файл с именем firebase.js и поместите в него код такого типа:Вы регистрируете этот файл как плагин в nuxt.config.js 

plugins: [
    '@plugins/firebase.js'
  ],

Вам необходимо импортировать Firebase вверху вашего index.js (или другого файла, в котором вы его используете) в магазине.

import * as firebase from 'firebase'

тогда вы можете использовать firebase в вашем nuxtServerInit по своему усмотрению.Например, 

    actions: {
                nuxtServerInit({dispatch}, context) {
                  return Promise.all([
                    dispatch('get_posts', context),
                    dispatch('any_other_actions', context)
                  ]);
                },
                get_posts (vuexContext, context) {
                  return firebase.database().ref(YOUR DB).once('value')
                  .then(res => {

                  //...What you want it to do here


                    })
                },

Firebase довольно мощный, и вы захотите почитать документы, чтобы узнать о функциях, которые вы хотите выполнять, но, да, все хорошо в nuxt.

...