mini-fluxをvuejsで実装してみた。

最近、10分で実装するFlux という記事をみてFluxについてちょっと理解することができた。

Vueもコンポーネントベースなフレームワークなので、 VueでFluxを使うとどんな感じなのかなぁということでVueでざっくり書いてみました。

いろいろ面倒な部分は端折ったりはしたものの、基本的な部分は殆ど同じで、 Reactで稼働している部分をそのままVueに置き換えた感じ。

リポジトリはここから。

https://github.com/webuilder240/mini-flux-vue

実装内容は殆ど同じなので、 変更したVue関連のファイルについてだけ記載しておく

Counter.vue

<template>
  <div>
    <button @click="tick()">Count Up</button>
    <p>
      Count: {{ count }}
    </p>
  </div>
</template>

<script>
  "use strict";
  import ActionCreator from "./ActionCreator";
  import Store from "./Store";
  import EventEmitter from "./EventEmitter";
  var dispatcher = new EventEmitter();
  var action = new ActionCreator(dispatcher);
  var store = new Store(dispatcher);
  export default {
    data (){
      return {
        count: ''
      }
    },
    created (){
      this.count = store.getCount();
      store.on('CHANGE', () => {
        this._onChange();
      });
    },
    methods: {
      tick (){
        action.countUp(this.count + 1);
      },
      _onChange (){
        console.trace();
        this.count = store.getCount();
      }
    }
  }
</script>

ご覧のとおり、コンストラクタでやっていた処理をVueのライフサイクルに合わせて、 Createdに色々移動した。

一応console.trace() を使って、1方向に処理が流れているかを確認しておく。

React

_onChange @  Component.js:23
(anonymous function) @ Component.js:18
emit    @ EventEmitter.js:23
onCountUp @ Store.js:22
emit    @ EventEmitter.js:23
countUp @ ActionCreator.js:10
tick @ Component.js:28

Vue

_onChange @  Counter.vue?c75d:25
(anonymous function) @ lang.js:214
(anonymous function) @ Counter.vue?c75d:17
emit    @ EventEmitter.js:23
onCountUp @ Store.js:22
emit    @ EventEmitter.js:23
countUp @ ActionCreator.js:10
tick @ Counter.vue?c75d:22

これで良いのでは！？！？

ざっくりまとめ

• Fluxは「思想」であるというのがよく理解できた。
• 実装自体はシンプルなので、コードみたり、書いたりしたほうが図とか見るよりよくわかった。
• もちろん思想なので、他のフレームワークでこの思想を応用することが出来る。
• 大規模SPAサイトかなんかでつかうと真価を発揮すると思う。
• 大規模がどのくらいかはよくわからない。
• プロダクションで使うためにはもう一歩踏み込んで理解か必要なのかと思っている。

いろいろ間違っている気しかしないので、どんどん指摘ください。