未解析的变量 $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/add?

我已经导入了那个

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

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);
});

下面是 main.js 文件

main.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 documentation 中所述，您需要将 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，如下所示（参见文档）：

npm install vuefire

未解析的变量 $firebaseRefs vue js

unresolved variable $firebaseRefs vue js

firebase

vue.js

vuefire