【第2回】Vuex公式ドキュメントを学んでみる〜store(ストア) とは？〜

この記事のレベル感

・Vue.jsを使ったWeb開発やアプリを作ったことはあるけどは、Vuexのドキュメントを読んだり、実務で使っていない人

Vuexのstoreとは？

• Vuexアプリの中心
• アプリのstate(状態)を保持するコンテナ
• storeのstateに対しリアクティブかつ効率的な更新を行う
• mutationsをcommitすることでのみstoreのstateを更新できる

Vuexの環境構築

BootStorap等のライブラリ同様、CDNもしくはnpm、yarnで環境を整えられます。
詳しくはVuexのインストールをご確認ください。

Vuexのstoreを使用した例

Vuex公式ページにも掲載されているカウンターアプリを例に取ります。

<div id="app">
  <p>{{ count }}</p>
  <p>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </p>
</div>

カウンターで表示するcountとカウントの値の増減アクションを起こす@clickイベントを記述します。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment: state => state.count++,
    decrement: state => state.count--
  }
})

new Vue({
  el: '#app',
  computed: {
    count () {
        return store.state.count
    }
  },
  methods: {
    increment () {
      store.commit('increment')
    },
    decrement () {
        store.commit('decrement')
    }
  }
})

new Vuex.Store側ではstateとmutationsを設定します。
stateにはカウンターで表示する値をmutetionsにはカウントの値の増減をstateに反映させます。(素のVueでいうとmethodsで記述していたようなカウントの処理も記述します。)

new Vue側ではstoreで管理するデータを取り出し、HTML　viewに反映させます。

感想

これだけ簡易的なアプリであればVuex導入の効果は薄いかと思いますが、コードはかなりシンプルになりますね。