如何将 Firebase Firestore 数据添加到 s-s-r Nuxt Apps Vuex Store

Posted 2023-02-22

【中文标题】如何将 Firebase Firestore 数据添加到 s-s-r Nuxt Apps Vuex Store

【英文标题】：How to Add Firebase Firestore Data into s-s-r Nuxt Apps Vuex Store

【发布时间】：2019-03-25 09:34:54

【问题描述】：

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

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

最好在 s-s-r 应用中使用 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))
      ,

    
  )

【参考方案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 中运行良好。

【讨论】：

您会在此操作中获取所有数据库或产品吗？还是只请求您需要的东西，然后在产品页面上请求产品？