时间戳

首页 > 解决方案 > 如何使用自定义身份验证声明来查询 Firestore（使用 vuexfire）

javascript - 如何使用自定义身份验证声明来查询 Firestore（使用 vuexfire）

问题描述

在我的 vuex 中，我将一个自定义身份验证声明保存为声明（state.claims）。我可以从我的 vue 组件中的状态中读取它，我也可以在 vue devtools 中看到它。

但是当我尝试使用 state.claims 查询 firestore 集合时， 有时我会得到 null（状态中的默认值），或者我无法复制的错误说这是一个“自定义对象 B”

它在第一次加载时工作，但在一次刷新后它会中断，直到我来回切换视图

我的猜测是它没有足够快地获得索赔的价值，但我不确定

Vuex商店

import Vue from "vue";
import Vuex from "vuex";
import { vuexfireMutations, firestoreAction } from 'vuexfire'
import {db} from "@/components/fbInit.js";
import firebase from 'firebase'

Vue.use(Vuex);

export default new Vuex.Store({

  state: {    
    tests:  [],
    claims: [],
    user:       null,
    isLoggedIn: false,

  },

  mutations: {
    ...vuexfireMutations,

    setUser: state => {
      if (firebase.auth().currentUser) {
        state.isLoggedIn = true;
        state.user = firebase.auth().currentUser;
        state.claims = firebase.auth().currentUser.getIdTokenResult().then((idTokenResult) => {
          state.claims = idTokenResult.claims.company
        }) .catch((error) => {
          // eslint-disable-next-line no-console
          console.log(error);
        });
      }
    },

  },

  actions: {

    //  GET documents in a collection/subcollection and put them into state
    getFire:  firestoreAction(({ bindFirestoreRef, state }) => {
      //return the promise returned by 'bindFirestoreRef'
      return bindFirestoreRef('tests', db.collection(state.claims))
    }), 

 setUser: context => {
      context.commit('setUser');  //context.commit to perform mutation
    },
  }
})

Vue 组件

<template>
  <div class="pa-9">
    <div>
      <v-card light>
        {{ this.claims}} 
      </v-card>
       <v-card >
        {{ this.tests }}
      </v-card>
    </div>
  </div>

</template>

<script>

import {db, functions } from '../components/fbInit'
import { mapState }   from 'vuex'
import { mapActions } from 'vuex'

export default {
  name: "Claims",

  data: () => ({

  }),
  created() {
    this.setUser()
    this.getFire()

      },

    computed: {
    ...mapState ([
      'events','wow','user','isLoggedIn', 'claims','tests'
    ]),
  },

  methods: {

     ...mapActions([ 'setUser', 'getFire',  ]),

      });
    }
  },
};
</script>

错误

FirebaseError: Function Firestore.collection() requires its first argument to be of type non-empty string, but it was: a custom B object

[Vue warn]: Error in render: "TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'B'
    |     property 'c' -> object with constructor 'B'
    |     property 'b' -> object with constructor 'Wb'
    --- property 'a' closes the circle"
FirebaseError: Function Firestore.collection() requires its first argument to be of type non-empty string, but it was: null

编辑 Main.js 

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

require('dotenv').config();
import vuetify from './plugins/vuetify';
// require('@/components/fb.js')
import firebase from 'firebase/app'
import './components/fbInit'

import * as VueGoogleMaps from 'vue2-google-maps';



Vue.config.productionTip = false
/* eslint-disable */
let app;
firebase.auth().onAuthStateChanged(user => {
  if(!app) {
    app = new Vue({
      router,
      vuetify,store,
      render: h => h(App)
    }).$mount('#app')
  }
})

标签： javascriptfirebasevue.jsgoogle-cloud-firestorevuex

解决方案

我找到了一些文档。看里面的例子state应该firestoreAction(({ bindFirestoreRef, state })是 after }。所以应该是：

firestoreAction(({ bindFirestoreRef }, state )

但是我不确定它是否会在没有unbindFirestoreRef...的情况下工作

我希望它会帮助你！

推荐阅读