this. $ firebase не определено

Question

Я создаю свое первое приложение Vue.js, пытаюсь использовать vuex с vuexfire.

//main.js
import firebase from 'firebase';

...

Vue.prototype.$firebase = firebase.initializeApp(config);

...

firebase.auth().onAuthStateChanged(() => {
  /* eslint-disable no-new */
  new Vue({
    el: '#app',
    store,
    router,
    render: h => h(App),
    created() {
      this.$store.dispatch('setDealsRef');
    },
  });
});

router.beforeEach((to, from, next) => {
  const currentUser = firebase.auth().currentUser;
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
  if (requiresAuth && !currentUser) {
    next('/signin');
  } else if (requiresAuth && currentUser) {
    next();
  } else {
    next();
  }
});

И:

//store/index.js
import Vue from 'vue';
import Vue from 'vue';
import Vuex from 'vuex';
import { firebaseMutations } from 'vuexfire';

...

Vue.use(Vuex);

const db = this.$firebase.firestore();
const dealsRef = db.collection('deals');

И:

//store/mutations.js
export default {
  SET_USER(state) {
    state.user = this.$firebase.auth().currentUser;
  },
...
}

Это соответствует ОК, но выдает TypeError: this.$firebase is undefined[Learn More] в консоли.

Есть идеи, что я делаю неправильно?Я думаю, что прочитал все соответствующие учебные пособия и вопросы StackOverflow и перепробовал все.

Answer 1

Я думаю, что решил проблему:

1. Перемещение инициализации firebase в store.js
2. Изменение firebase.auth().onAuthStateChanged(() => { на Vue.prototype.firebase.auth().onAuthStateChanged(() => { в main.js
3. Импортировать базу данных как: import firebase from '@firebase/app'; import '@firebase/firestore';

Answer 2

Когда вы делаете:

Vue.prototype.$firebase = firebase.initializeApp(config);

Вы добавляете $firebase к экземпляру Vue.Таким образом, чтобы

this.$firebase

работал, this должен быть инстинктом Vue.Другими словами, эта строка должна выполнить внутри метод Vue / hook / computed / etc.

И код, который вы показываете, не делает этого:

const db = this.$firebase.firestore();

в приведенном выше коде this является внешним контекстом.(Вероятно, это window.)

Таким образом, чтобы он работал вне экземпляра Vue, вам нужно сделать :

const db = Vue.prototype.$firebase.firestore();

При условии, что строка выше выполняется после (по времени / порядку) строки, где вы инициализируете $firebase.