[Vue.js] ストアパターンとは

Vue.js

なぜ

Vue.js はページをいろんなコンポーネントに分離して開発することができます。

そのため、

ヘッダー
コンテンツボディ
フッター

それぞれのコンポーネントを作るみたいなことが簡単にできます。

このとき、厄介なのが「コンポーネントを深くしたとき」に

「子コンポーネント から 親コンポーネント」
「親コンポーネント から 子コンポーネント」

を操作したい場合が出てくるんですね。

せっかく疎結合で作っても、こういう相互参照が出てくると厄介です。
これはもう破綻する寸前です。

対策としてのストアパターン

その回避策として「データを示すオブジェクトを外に出してしまおう」というのがストアパターンです。

ストアは、次のようなシンプルな JavaScript です。

var store = {
  state: {
    message: 'Hello!'
  },
  setMessageAction (newValue) {
    this.state.message = newValue
  }
}

これを複数のコンポーネントから参照します。

var vmA = new Vue({
  data: {
    privateState: {},
    sharedState: store.state
  }
})

var vmB = new Vue({
  data: {
    privateState: {},
    sharedState: store.state
  }
})

テンプレートで次のようにすれば store.state.message を出力します。
もちろん、store.setMessageAction() を実行した場合も、変更がリアクティブに即反映されます。

{{ sharedState.message }}

Vue 公式のストアパターンの解説も、ぜひご覧ください。

状態管理 — Vue.js
Vue.js - The Progressive JavaScript Framework

※コードは上記ページのものを引用しましたー

ちょっとハマったこと

var vmA = new Vue({
  data: {
    sharedMessage: store.state.message
  }
})

上記のようにすると、リアクティブがうまく働かないようでした。
state 全体をコンポーネントのdataに代入すると良い感じです。

Vue.js 面白いです。