vue.js - 让所有 Vue 组件都可以使用一个变量，而无需通过 props 显式传递它？

Question

我有一个问题，所以在反应中，我们有反应消费者和提供者，可以让变量传递到我想要的任何地方。Vue有类似的东西吗？我需要将我的 Firebase 类传递给几乎每个组件，所以通过 props 传递它是一个坏主意。

Answer 1

您可以为任何模块创建一个包装器插件（即本例中的 firebase）。

/plugins/firebase-wrapper.js

import firebase from 'firebase'

const FirebaseWrapper = {
  install (Vue) {
    // INSTALL
    if (this.installed) return
    this.installed = true

    // CONFIG
    const config = {
     apiKey: "",
     authDomain: "",
     databaseURL: "",
     projectId: "",
     storageBucket: "",
     messagingSenderId: ""
    }

    // INIT
    firebase.initializeApp(config)

    Vue.prototype.$firebase = firebase
    Vue.firebase = firebase
  }
}

export default FirebaseWrapper

main.js

import FirebaseWrapper from "./plugins/firebase-wrapper.js"
Vue.use(FirebaseWrapper)

从 .vue 文件访问 firebase API，如下所示

let currentUser = await this.$firebase.auth().currentUser

或者

import Vue from 'vue'
let currentUser = await Vue.firebase.auth().currentUser

vuefire（npm 模块）可能会为您做同样的事情，即。将创建一个包装器插件并使 firebase APIs 全球可用，因此您不必编写自己的自定义插件。