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

【第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導入の効果は薄いかと思いますが、コードはかなりシンプルになりますね。