【Vuexストーリー】②Vuexを導入した話

シリーズ

1. AtomicDesignを導入した話
2. Vuexを導入した話
3. Stateful & Stateless
4. Store & Componentの重複

お久しぶりです。

過去「【Vuexストーリー】①AtomicDesignを導入した話」を書いてからほぼ半年は経ってますね。
いきなりVuexの話？となる方もいらっしゃると思いますので、議題から書いて行きます。

Vuexの状態管理パターン

Vuexはとてもシンプルな状態管理パターンを採用しています。

上のイメージのようにEventが発生され、Actionを起こし、Stateが変更され、Viewに表示される仕様です。
```
<template>
   <div>
        <!-- カウント表示 -->
       <span>{{ count }}</span>

        <!-- クリックイベント発生、カウントアップ -->
       <button @click="countUp">カウントアップ</button>
   </div>
</template>
<script>
   export default {
      data () {
         return { count : 0 }
      },
      methods: {
          countUp : function() { count ++; }
      }
   }
</script>
```
このような簡単なコードからは問題がないかも知れません。
もう少し複雑なコンポーネント構造になると問題は見えてきます。
```
<template>
   <div>
       <!-- ワード検索、検索オプション設定 -->
       <search-bar
           :search_word="search_word"
           :search_option="search_option"
           :doSearch="doSearch"
           :setOption="setOption">

       <!-- 検索結果、ページネーション -->
       <search-result
           :search_list="search_list"
           :current_page="current_page"
           :doSearch="doSearch"
           :setPage="setPage">

   </div>
</template>
<script>
   export default {
      data () {
         return {
            search_word : "",  // 検索ワード 
            search_option : {}, // 検索オプション
            search_list : {}, // 検索結果
            current_page : 1,  // ページネーションの現在ページ

         }
      },
      methods: {
         doSearch : function() { /* 検索実行 */ },
         setOption : function() { /* オプション設定 */ },
         setPage : function() { /* 検索ページ設定 */ },
      }
   }
</script>
```
これでもそこまで複雑なケースではないと思いますが、それでも結構な共通StateとActionができました。
もしsearch-barコンポーネントの中に子コンポーネントが存在したりすると
Propによる複雑度はさらに増加します。

解決策は？

コンポーネント外部にStateとActionのための独立的な空間を用意するのはどうでしょう？

このような構造にすることで全体的なコンポーネントツリーをViewとし、
コンポーネント間無駄なPropsをなくすことができます。

Vuexは？

上記の解決策に加えてVuexはFluxを活用したシステムです。
Vue.js公式サイトでは以下のようなイメージで説明をしています。
詳しい内容は公式サイトをご参考ください。

参考サイト

https://vuex.vuejs.org/

次回は

3. Stateful & Statelessについて話したいと思います。