[Vue.js]Mixinで処理の共通化を図る - atuweb : つながりを作るWebプログラマ

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化する処理はおしまいです。

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