Vueの勉強が着々と進みmixinを覚えましたため、使い方をまとめます。

mixinとは

mixinとはVue.jsが提供する「再利用のための仕組」みです。

公式から引用します。

ミックスイン (mixin) は、Vue コンポーネントに再利用可能で柔軟性のある機能を持たせるための方法です。
ミックスインオブジェクトは任意のコンポーネントオプションを含むことができます。
コンポーネントがミックスインを使用するとき、ミックスインの全てのオプションはコンポーネント自身のオプションに”混ぜられ”ます。

Vue.js > ガイド > ミックスイン
https://jp.vuejs.org/v2/guide/mixins.html

ミックスインはとても簡単に使うことができます。
サンプルをご覧ください。

サンプル

ゴール

クライアントサイドレンダリングでよくある「初回レンダリングまでのローディング表示」を実装します。

APIへコンテンツを取得しに行っている間はLoadingバーを表示し、

コンテンツ取得ができたらLodingバーを非表示とし、コンテンツ表示に切り替えます。

なお、上記は開発中のWebアプリの画面です。

環境

  • Vue.js 2.2.x
  • Node.js 7.7.x
  • mpn 4.5.x

Beforeコード

<template>
  <div>
    <loading-bar   v-if=" !isLoaded " />
    <page-contents v-else />
  </div>
</template>
<script>
export default {
  created() {
    this.fetchItem(this.$route.params.id)
  },
  data() {
    return {
      contents: {},
      isFinishedLoad: false
    }
  },
  computed: {
    isLoaded() {
      return this.isFinishedLoad
    }
  },
  methods: {
    setFinishedLoad(flg) {
      this.isFinishedLoad = flg
    },
    fetchItem(id) {
      this.$http({
        url: '/api/book/'+ id,
        method: 'GET'
      }).then(res =>  {
        this.book = res.data.book
        this.setFinishedLoad(true)
      })
    }
  },
  components: {
    'loading-bar'  : Vue.extend(require('./LoadingBar.vue')),
    'page-contents': Vue.extend(require('./Content.vue'))
  }
}
</script>

フラグを用意して、フラグによって画面が切り替わるというシンプルな仕組みです。
fetchItemsでAPIレスポンスを受け取った時にフラグを立てます。

たくさんのことをやろうとしているため、コードの可読性は良くありませんね。

Afterコード

Loadingバー表示に関わる処理をmixin化し、メイン処理から追い出しましょう。

次のようにLoadingFlg.vueを作成します。

<script>
export default {
  data() {
    return {
      isFinishedLoad: false
    }
  },
  computed: {
    isLoaded() {
      return this.isFinishedLoad
    }
  },
  methods: {
    setFinishedLoad(flg) {
      this.isFinishedLoad = flg
    }
  }
}
</script>

最初のコードから、mixin化した部分をカットし、かわりにmixinsを定義します。

<script>
export default {
  created() {
    this.fetchItem(this.$route.params.id)
  },
  data() {
    return {
      contents: {}
    }
  },
  methods: {
    fetchItem(id) {
      this.$http({
        url: '/api/book/'+ id,
        method: 'GET'
      }).then(res =>  {
        this.book = res.data.book
        this.setFinishedLoad(true)
      })
    }
  },
  components: {
    'loading-bar'  : Vue.extend(require('./LoadingBar.vue')),
    'page-contents': Vue.extend(require('./Content.vue'))
  },
  mixins: [
    Vue.extend(require('./LoadingFlg.vue')),
  ]
}
</script>

これだけでmixin化する処理はおしまいです。

フラグを更新する処理は残ってしまいましたが、関心の薄いコードを外部に出すことができてコードがずっと見やすくなりました。

おわりに

mixinとはざっくり言えばクラスを継承するイメージなのですが、Javaの継承とな違ってなんとなくスッキリしない感があります。

mixinはコードの再利用に欠かせない仕組みであり大変便利なのですが、あまり多用するとわけがわからなくなっしまうと感じました。

チームで開発する場合には特にこの辺りのルール決めが大切ではないかと感じます。

この記事はtomita@atuwebがお届けしました。



Learning Vue.js 2

スポンサーリンク
ad_336
ad_336
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
コメントの入力は終了しました。