はじめに

アプリの規模が大きくなっていくとデータの管理が大変になります。
特にVue.jsやReactなど、コンポーネント間でのデータ受け渡しが頻発するようなものではアプリが大きくなることで子要素の子要素の～子要素のデータを取得～というようにデータの利用が複雑になります。
今回はVue.jsにて、それを解決するVuexライブラリの利用方法についてまとめたいと思います。

※Vuexはあくまで大規模用の際に便利というものであり、コンポーネントを多数使わないような小規模のアプリの場合は無理に用いなくても大丈夫です。

Vuexのインストール

以下の公式ドキュメントに沿ってVuexのインストールを行います。

Installation | Vuex

npm install vuex@next

実際にVuexを用いてデータ管理を行う

それでは実際にVuexを用いてデータ管理をしてみたいと思います。今回は以下の公式ドキュメントを参考に、ボタンをクリックすると数値が+1ずつされていく、というものを作ってみました。

https://next.vuex.vuejs.org/guide/

今回は直接stateへアクセスしても良いのですが、mutationsやgettersを介してアクセスする方針で実装しています。

import { createStore } from 'vuex';

const store = createStore({
  state() {
    return {
      count: 0
    }
  },
  getters: {
    count: state => state.count
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});

export default store;

<template>
  <increment></increment>
  <count></count>
</template>

<script>
import count from './components/count.vue';
import increment from './components/increment.vue';

export default {
  components: {
    count,
    increment
  }
}
</script>

gettersからstateのcountを取得します。

<template>
  <div>{{ count }}</div>
</template>

<script>
export default {
  computed: {
    count(){
      return this.$store.getters.count
    }
  }
}
</script>

mutationsを介してstateのcountへアクセスしています。

<template>
  <button @click="increment">+1</button>
</template>

<script>
export default {
  methods: {
    increment() {
      this.$store.commit('increment')
    },
  },
};
</script>