неразрешенная переменная $ firebaseRefs vue js

Question

У меня есть функция добавления для добавления фильмов в базу данных firebase

methods: {
            add() {
                this.$firebaseRefs.movies.push({
                    name: this.newItem.name,
                    price: this.newItem.genre,
                    rating: this.newItem.rating,
                    reviews: this.newItem.reviews,
                    cast: this.newItem.cast,

                });
                this.newItem.name = '';
                this.newItem.genre = '';
                this.newItem.rating = '';
                this.newItem.reviews= '';
                this.newItem.cast= '';
                this.$router.push('/dashboard')
            }
        }
    }

Но появляется ошибка Unresolved variable $firebaseRefs, и когда я пытаюсь добавить изменения маршрута в http://localhost: 8080 / добавить ?

Я импортировал это

import { db } from '../db';

дБ. js

import * as firebase from "firebase";
import store from "./store";
let config={
    apiKey: "AIzaSyDQ2dXBMuIJ2EBYeVqucJpOF33C0tsFlLk",
    authDomain: "tv-show-tracker-9899e.firebaseapp.com",
    databaseURL: "https://tv-show-tracker-9899e.firebaseio.com",
    projectId: "tv-show-tracker-9899e",
    storageBucket: "tv-show-tracker-9899e.appspot.com",
    messagingSenderId: "433917891798",
    appId: "1:433917891798:web:bb35a74ae42e6db339a577"
};
let app = firebase.initializeApp(config);
export const db = app.database();

// eslint-disable-next-line no-unused-vars
let firebaseRefs = db.ref('movies');

firebase.auth().onAuthStateChanged(user => {
    store.dispatch("fetchUser", user);
});

Ниже приведен основной. js файл

основной. js

import Vue from 'vue'
import App from './App.vue'
import router from "./routes/route.js";

import store from "./store";



Vue.config.productionTip = false;




new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app')

Answer 1

Как объяснено в документации vuefire , вам необходимо установить Vuefire как плагин Vue. Поэтому, поскольку вы используете базу данных реального времени, вам необходимо адаптировать свой файл main.js следующим образом

import Vue from 'vue'
import App from './App.vue'
import router from "./routes/route.js";
import store from "./store";
import { rtdbPlugin } from 'vuefire'

Vue.use(rtdbPlugin)
Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app')

---

Не забудьте установить последнюю версию Vuefire следующим образом (см. Do c ):

npm install vuefire