這是最近和團員偷學到的招。

先來看看官網混入的文件，有分上下兩段，上段是基礎 + 選項合併，下段是全局混入，最後一個 "自定义选项合并策略" 說實在的我看得有點複雜，也沒用過所以不知道哈哈。

局部混入其實我覺得和另外寫一個小組件有點像，寫小組件是要註冊進 components 選項裡面，而局部混入是丟到 mixin 選項裡面，不過局部混入會自動進行選項合併。我個人目前是還沒有用過局部混入，倒是全局混入看似比較好用的樣子，在這個專案中，目前是把 showUser 方法給做了個全局混入，這樣在各個頁面都方便查看使用者資訊。

我們原本是寫在這裡:

App.vue 內

methods: {
  showLoginClick () {
    this.loginClick++
    if (this.loginClick > 2) {
      this.loginShow = true
      setTimeout(() => {
        this.loginClick = 0
        this.loginShow = false
      }, 3000)
    }
  },

	// 此方法用來測試現在使用者，綁定在首頁大圖 p 元素上
	showUser () {
    var user = firebase.auth().currentUser
    var name, email, photoUrl, uid, emailVerified

    if (user != null) {
      name = user.displayName
      email = user.email
      photoUrl = user.photoURL
      emailVerified = user.emailVerified
      uid = user.uid
      console.log({
        name,
        email,
        photoUrl,
        emailVerified,
        uid
      })
    } else {
      console.log('使用者以登出', user)
    }
  }
}

現在不要了，把 showUser 剪下，現在可以新增一個資料夾 functions 用來管理我們外部的函式

現在 showUser.vue 的內容為:

<template>
  <span></span>
</template>

<script>
import { firebase } from '../Model/FirebaseModel.js'
export default {
  name: 'globalFunctionShowUser',
  created () {
  },
  methods: {
    showUser () {
      var user = firebase.auth().currentUser
      var name, email, photoUrl, uid, emailVerified

      if (user != null) {
        name = user.displayName
        email = user.email
        photoUrl = user.photoURL
        emailVerified = user.emailVerified
        uid = user.uid
        console.log({
          name,
          email,
          photoUrl,
          emailVerified,
          uid
        })
		// 多個 return 之後要另外操作返回值的話也方便，事實上任何的函式都應該要有 return，才符合輸入輸出概念，也方便單元測試。
        return {
          name,
          email,
          photoUrl,
          emailVerified,
          uid
        }
      } else {
        console.log('使用者以登出', user)
      }
    }
  }
}
</script>

定義好內容後，現在我們可以對這個組件檔做全局混入，我們在 main.js 也就是進入點的地方進行混入:

import Vue from 'vue'
import App from './App.vue'
import { router } from './router'
import store from './store'

import { BootstrapVue } from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
// 引入剛剛的組件檔
import showUser from './functions/showUser.vue'

Vue.use(BootstrapVue)
Vue.config.productionTip = false

// 全局混入
Vue.mixin(showUser)

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

這樣你在其他的 .vue 檔，就可以像下面這樣對此組件進行呼叫，就像使用函式或方法一樣 ...

this.showUser()

今天就這樣，懂了方法後，後面我們或許可以再把 Firebase 的常用方法做個混入，如此就不必在各個頁面進行 import 了。

沒事也可以逛逛我們其他團隊成員的文章啦 ~~
eien_zheng: 前端小嘍嘍的Golang學習旅程_The journey of learning Golang 系列
PollyPO技術: 前端設計轉前端工程師-JS踩坑雜記 30 天 系列
阿電: 忍住不打牌位，只要30天VueJS帶你上A牌 系列
喬依司: 實作經典 JavaScript 30 系列