VueJSでアプリの状態管理と言えばFluxアーキテクチャのVuexを使うことが多いと思いますが、レイヤーが多く小さいアプリだとそこまでする必要がないと感じる場合があると思います。
そんな場合はVuexより単純で導入しやすいStoreパターンがおすすめです。
目次
Storeパターンとは
状態を示すSharedState、State変更するActionsを内包したStoreオブジェクトを実装し、Vue componentはSharedStateを参照します。
SharedStateを参照しているコンポーネントは、SharedStateが変更されたら再描画されます。
コンポーネントAからAction関数で状態変えた場合、SharedStateを参照していたらコンポーネントBにもStateの変更が適用されます。
StoreにActionsが内包していたりレイヤーが明らかに少なかったり、Fluxより単純であることが分かります。
サンプル実装
ボタン押したらカウントが追加されるという単純なサンプル実装です。
まずはstore.js。stateにカウント数を、actionとしてカウントアップ関数を実装します。
var store = {
state: {
count: 0,
},
incrementCount() {
this.state.count += 1;
}
}次にコンポーネント。
ポイントは、カウント数をStore.stateで管理しているという点。
countViewはStore.stateを参照しているだけで、incrementButtonはStoreのカウントアップ関数(incrementCount)を実行するだけです。
var incrementButton = Vue.component(
'increment-button', {
template: `
<div>
<button @click="onClick">count up</button>
</div>
`,
methods: {
onClick() {
store.incrementCount();
}
}
});
var countView = Vue.component(
'count-view', {
data: function() {
return {
"state": store.state,
}
},
template: `
<div>
{{ state.count }}
</div>
`,
});
あとはhtml。コンポーネントをまとめるだけです。実際に動かしてみると、ボタンを押したら数字が増えていくことが分かります。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue Store sample</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/javascript" src="store.js"></script>
<script type="text/javascript" src="components.js"></script>
<script>
var app = new Vue({
el: '#root',
components: {
'increment-button': incrementButton,
'count-view': countView,
},
template: `
<div>
<count-view />
<increment-button />
</div>
`,
});
</script>
</body>
</html>まとめ
Fluxよりも仕組みが非常に単純なので、まずはStoreパターンを学習してからFluxアーキテクチャを勉強すると良いと思います。
導入が非常に単純なため、Vuex使うほどでもない場合に使うと良いです。