發現全域混入與 b-card 組件產生的問題

昨天上班時剛好抽空測了個東西，沒想到居然有 bug 產生。
我們 main.js 裡面做全域混入 firebase 的部分，目前發現不可這麼做，必須通通改為局部混入。

也就是說我們混入的地方要把它取消

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

import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

這部分不能要了
// import firebase from './Model/FirebaseModel.vue'
// Vue.mixin(firebase)

Vue.use(BootstrapVue)
Vue.use(IconsPlugin)

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

把其他有用到 Firebase 模組的地方通通改成局部混入，以 App.vue 來說就是像這樣:

<script>
import firebase from './Model/FirebaseModel.vue'
export default {
  name: 'App',
  mixins: [firebase],
  data () {
    return {
      loginShow: false,
      loginClick: 0
    }
  },
  created () {
    this.F_stateWatcher()
  },
  methods: {
    showLoginClick () {
      this.loginClick++
      if (this.loginClick > 2) {
        this.loginShow = true
        setTimeout(() => {
          this.loginClick = 0
          this.loginShow = false
        }, 3000)
      }
      this.$nextTick()
    }
  }
}

變得比較麻煩，但是沒辦法，目前發現的問題是如果全域混入了，使用 BootstrapVue 的 b-card 組件時，他提供的
title 、 sub-title property 竟然會失效，不過後來發現可以使用 <b-card-title> 來做為替代品，他和 title property 會渲染一樣的結果，目前不知道是否全域混入會對 b-card 產生 bug，就算我混入的組件是完全沒有內容的也是一樣的狀況，所以應該和組件內容無關，而是混入這個動作會對他產生問題，所以這邊我是傾向個別 mixin，連 <b-card-title> 替代品都不要使用，畢竟還不知道是否有其他的連帶影響 ...。

算是實作過程中遇到到的坑吧 ! 如果有人知道怎麼回事還希望可以來幫幫解惑一下哈哈，或許晚點我會找個地方發文問問...。

賽後感言

感什麼言，很多東西都準備的很差啊哈哈。這個月來真的非常累，老實說前面有事先準備大概 5 ~ 6 篇文章，結果根本就不夠用阿，感覺準備的方向錯誤，最前面應該把組件的教學部分拆掉，直接早點開始做專案才對，不然後面也不會搞成下班後要趕快做專案，做完再寫文章，還因為 debug + 趕進度的關係，程式碼可以說是興頭一起直接下去了，完全沒有事先做好架構的規劃，幾乎都是邊做邊調，搞的亂七八糟，連 bootstrap 的 RWD Layout 都沒有花時間去給他做個基本處理，現在網站給他縮小只有一個慘字可以形容阿哈哈。

我記得當初給他訂下的功能是這些 ( 結果訂下的功能完全沒把 Recently.vue 放在眼裡哈哈 )，並且有完成的給他打個勾:

使用者:
瀏覽文章 v
在文章底下留言 v
關鍵字搜尋文章

管理者:
訪客一樣的功能
文章的新增編輯刪除 ( 算完成一半沒做到刪除 )
個人資料的編輯 v
屏蔽訪客的留言

個人覺得算是還過得去啦，雖然沒全部完成，但是因為沒考慮到的東西太多，比如說要做個人資料的編輯，其中有大頭貼的部分後來才想到必須配合 storage 功能，網站上線要用 hosting 功能，其實這個以前我都沒碰過，Firebase 我是在大學時有碰過 Auth 和 Firestore 而已，現在都畢業兩年了，是剛好藉著這次機會乾脆把他一口氣搞起來，順便完善學習一下以前沒有學完的 Firebase 其他模塊阿ㄏㄏ...，最後勉勉強強算是讓這個專案有了基本的骨幹在啦哈哈。

真的亂七八糟，但也因為這次比賽，讓我看見自己在某些極限狀態下竟然還能夠鼓起力氣來準備比賽，覺得自以完完全全符合自己在第一篇所述說的四種人中，第二種人的特質啊 ( 就算不知道做什麼還是一直做，無腦衝的人啦 )! 真為自己感到開心阿其實，最後呢，這隻專案我打算把他搞好，未來的時間會持續給他更新，網址就丟在這裡了，基本上就是爛泥一攤的狀態阿哈哈，沒事別點進去亂看 XD，登入的方法我會把它改掉所以各位別亂試啊哈。

https://sianzaren-fa8bb.web.app/

之後要更新什麼呢 ? 恩基本上會先從網站外觀重新把它搞起來，再來重新做好後台的東西，我一定要讓他感覺有被好好對待的樣子啦哈哈，其實基本缺乏的東西真的很多啊，比如說 Router 就可以吐槽很多，其實現在給網址後面接個 /login 還是可以進到登入頁阿、也沒有給個重新導向 404 頁面阿啥的，哎呀呀真的是好麻煩阿，更新文章應該會放到那個目前很還是很爛的專案裡面啦哈哈，因為這次開這個 Firestore 本來就是有打算要來經營個部落格放資料，想說自己搞一個哈哈，會把它當作鐵人賽的延續，一邊紀錄前進一邊精進，謝謝收看到如今的你，希望我們共同成長回饋社會，做個勇往直前的人，甘溫甘溫一起努力 ~~

最後感謝我的隊友們:Polly、阿電、喬依司、Eien，哈哈。

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