В моем vuex у меня есть одна пользовательская заявка на авторизацию, сохраненная для утверждения в качестве заявок (state.claims). Я могу читать это из состояния в моих vue компонентах просто отлично, и я также могу видеть это в vue devtools.
Но когда я пытаюсь использовать state.claims для запроса коллекции Firestore, Иногда я получаю нулевое значение (значение по умолчанию в состоянии) или ошибку, которая Я не мог повторить, говоря, что это был «пользовательский объект B»
Он работает при первой загрузке, но после одного обновления sh он прерывается, пока я не переключаю взгляды назад
Мое предположение является то, что он не получает значение достаточно быстро для претензий, но я не уверен,
Vuex store
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')
}
})