6
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Flux と Component 〜 Vue.jsとVuexとVuex-connect

Posted at

言語化するのを放棄した

Flux

  • グローバルステート及びそれに伴う周辺アクセサなどなど
  • 開けた局所的な操作
  • 所詮はグローバル

開けている必要のある局所的な操作と、開けている必要のない局所的な操作、圧倒的に後者のほうが多数だよね問題がある。死ぬ。

Component

  • 強いscope、明確なIN OUT(のはず)
  • 閉じたモノリシックな操作
  • 所詮はバケツリレー

大体の場合、親のコンポーネントはバケツで死ぬ。

ストレス度合い

グローバルな問題は、臭いレベルの苦痛にとどまるが、破綻時の影響が計り知れない。

短期的な観測ではバケツリレーの方がストレス値は高い。

なのでまぁfluxに逃したくなる気持もわかるが、全部が全部flluxに流すだけなら「綺麗なjQuery」書いてる方がましになる。

閉じた部分、開けた部分をしっかり意識して運用する。

最近のユースケース

Vue.js/Vuex で Flux運用をとっている。

親直ルートのコンポーネントは全てVuex-connectコンポーネント

Vuex-connect コンポーネントはprop使えずバケツが出来ないので,依存箇所がgetterで明確に制御出来る。
この辺はFluxフローの影響範囲特定にかなり役立つ。

Vuex-connect はむやみに乱用しない。

require("vuex-connect")をコンパイルルートでのみにしぼり、Component側のファイルでの利用を禁止。
かつ Veux-connectコンポーネントの親子関係生成を禁止して、Veux-connect コンポーネント以下ではバケツを強制。

構造としてはコアに fluxに載ったVuex-connectコンポーネントが幾つか配置され、
周辺にスコープの固い、通常Componetが多数配置される、みたいな流れになる。

6
10
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?