如何使用自定义auth声明查询消防站(使用vuexfire)

Question

在我的vuex中，我有一个自定义的auth请求保存到state (state.claims)。我可以在我的vue组件中从状态中读到这一点，我也可以在vue devtools中看到它。

但是，当我试图使用state.claims查询一个消防局集合时，有时会得到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')
  }
})

Answer 1

我找到了一些文档。看看这里的例子，state在firestoreAction(({ bindFirestoreRef, state })中应该在}之后。所以应该是：

firestoreAction(({ bindFirestoreRef }, state )

然而，我不确定如果没有unbindFirestoreRef，它是否会工作.

我希望它能帮到你！