首次开发Vue.js应用（Vuex+Vuexfire）遇报错：this.$firebase is undefined

嘿，我帮你排查下这个问题～ 看你的代码和报错信息，大概率是在Vuex的setDealsRef action里尝试调用this.$firebase时出的错，核心原因是Vuex action里的this指向的是Vuex的Store实例，而不是Vue组件实例，所以根本拿不到挂载在Vue.prototype上的$firebase属性。

下面给你两个靠谱的解决方案：

方案1：直接在Vuex中导入Firebase实例 #

这是最简单也最稳定的方式，不用依赖Vue的原型链：

1. 在你的Vuex Store文件（比如store/index.js或者对应的模块文件）顶部导入Firebase：

import firebase from 'firebase'

2. 然后在setDealsRef action里直接使用Firebase实例：

actions: {
  setDealsRef({ commit }) {
    // 直接调用Firebase的方法，不需要this.$firebase
    const dealsRef = firebase.database().ref('deals')
    // 接下来按照Vuexfire的规则绑定数据，比如：
    this.bindFirebaseRef('deals', dealsRef) // 具体写法根据你的Vuexfire版本调整
  }
}

方案2：将Firebase实例注入到Vuex Store中 #

如果你希望在Vuex里统一通过Store访问Firebase，可以用这种方式：

1. 在main.js中先初始化Firebase实例，然后把它传入Store：

// main.js
const firebaseInstance = firebase.initializeApp(config)
Vue.prototype.$firebase = firebaseInstance

// 如果你是在单独的store/index.js里创建Store，可以把firebaseInstance传进去
import createStore from './store'
const store = createStore(firebaseInstance)

2. 在store/index.js中接收Firebase实例并使用：

// store/index.js
export default function createStore(firebase) {
  return new Vuex.Store({
    actions: {
      setDealsRef({ commit }) {
        const dealsRef = firebase.database().ref('deals')
        // 执行Vuexfire的绑定逻辑
      }
    }
  })
}

另外补充一句：如果是在Vue组件的方法里调用this.$firebase，那是完全没问题的，只有在Vuex的actions/mutations/getters里，this的上下文才是Store，这点要注意区分哦～

内容的提问来源于stack exchange，提问作者Philip Seyfi