如何将 Firebase Firestore 数据添加到 SSR Nuxt Apps Vuex Store

Question

我正在尝试在我的 Nuxt 应用程序中将位置设置到 Vuex 商店。我已经研究过使用 vuexfire，但是，我不确定这在 SSR 应用中是否是最佳选择，或者一般来说什么是最简单的最佳实践。

您如何从 firebase firestore 请求并设置状态（在本例中为“位置”）？

最好在 SSR 应用中使用 nuxtServerInit 吗？

存储/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))
      },

    }
  })
}

Answer 1

我没有使用过 vuexfire，但使用了带有 nuxt 的 firebase，并且效果很好。这就是我所做的。

npm install --save firebase

创建一个名为 firebase.js 的文件并将此类代码放入其中：

import * as firebase from 'firebase'

if (!firebase.apps.length) {
    firebase.initializeApp({
    apiKey: '<your-api-key>',
    authDomain: '<your-domain>',
    databaseURL: '<your-url>',
    projectId: '<your-id>',
    storageBucket: '<your-bucket>'
    })
}

export { firebase }

然后你将该文件注册为 nuxt.config.js 中的插件

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

您需要在商店中的 index.js（或您正在使用的其他文件）顶部导入 firebase。

import * as firebase from 'firebase'

然后您可以根据需要在 nuxtServerInit 中使用 firebase。例如。

    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 中运行良好。