😎

mixin(Vue.js)の基本的な使い方とFirebaseを用いた実装例

2020/10/30に公開

JavaScript

注記

初心者が忘備録も兼ねて作成したので、正確でないところもあると思います。
その際はコメントで教えていただけると嬉しいです。

環境

MacOS Catalina 10.15.7
vue-cli 4.5.7
Firebase 8.14.1

mixinとは

SCSSを使っている方はmixinに聞き覚えがあると思いますが、実はVue.jsにもmixinがあります。
※vue-cliをインストールしている前提になります。

mixinの特徴

簡潔に表すとコードの管理が楽になるというのが特徴です。

例えば、Webページの作成で、各ページに使用したい機能がある時に、それをすべてのファイルにいちいち記述するのは面倒ですよね。
また、変更があった時に書き換えるのも時間がかかるので非効率です。

そんな時に、mixinを使えば一箇所に記述したコードを使いたいページに導入できます。
一箇所に記述したものを他のファイルで使うので、新しいファイルに同様の機能を追加するときや、書き換えるときも効率的に実装できます。

mixinの使い方の大雑把なイメージ

mixinを作成して、componentファイル内のVueファイルで読み込みます。(大雑把)

実装例

今回は例としてfirebaseを実装します。
mixinフォルダのexampleMixin.jsにfirebaseの基本情報を書き込み、それをcomponentsフォルダ内のApp.vueファイルにimportします。

※firebaseの詳しい導入方法は主題から外れるので割愛します。
興味のある方はこちらを参考にしてください。(公式)

構成

src----mixin---exampleMixin.js
         |
         |
      components---App.vue
                 |
                 |
                 --main.js

exampleMixin.js

//今回は例としてAuthenticationとCloudFirestoreをインポートしています。
import firebase from "firebase";
import "firebase/auth";
import "firebase/firestore";
//firebaseの導入です
export default {
    mounted:function(){
    const firebaseConfig = {
        apiKey: "省略",
        authDomain: "省略",
        databaseURL: "省略",
        projectId: "省略",
        storageBucket: "省略",
        messagingSenderId: "省略",
        appId: "省略",
        measurementId: "省略"
    };
    firebase.initializeApp(firebaseConfig);
    firebase.analytics();
}

App.vue

<script>
//ここで作成したmixinを読み込む(exampleMixin.jsの拡張子は省略可能です。)
import exampleMixin from "../mixin/exampleMixin.js"

export default {
//mixinsの記述がないと読み込まれないので注意(語尾にsをつけるのも忘れがちです。)
mixins: [
    exampleMixin
]
//以下略
}
</script>

まとめ

以上がmixinの基本的な使い方でした。
mixinを積極的に使って、管理のしやすいコードの記述に役立てていきましょう！

参考サイト

公式のリファレンスです。

こちらの記事も参考にさせていただきました。
vue cliでmixinを作成し、インポートする方法(Qiita)