Vuexを使った状態管理

Vuexは、Vue.jsアプリケーションの状態管理を一元化するための公式ライブラリです。この記事では、Vuexの基本概念と導入方法、ステート、ゲッター、ミューテーション、アクションの使い方について記述します。

### 目次

1. Vuexの基本概念と導入
2. ステートの定義と使用
3. ゲッターの定義と使用
4. ミューテーションの定義と使用
5. アクションの定義と使用
6. モジュール化によるスケーラブルな状態管理

### 1. Vuexの基本概念と導入

Vuexは、アプリケーションの状態を一元管理し、コンポーネント間での状態の共有を容易にします。まず、Vuexをプロジェクトに導入します。

### インストール

```bash
npm install vuex --save
```

### ストアの設定

`src/store/index.js`にストアを設定します。

```jsx
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    getCount(state) {
      return state.count;
    }
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    decrement(state) {
      state.count--;
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    },
    decrement({ commit }) {
      commit('decrement');
    }
  }
});
```

### ストアの登録

`src/main.js`でストアを登録します。

```jsx
import Vue from 'vue';
import App from './App.vue';
import store from './store';

new Vue({
  store,
  render: h => h(App)
}).$mount('#app');
```

### 2. ステートの定義と使用

ステートは、アプリケーションの現在の状態を保持する場所です。コンポーネントからステートにアクセスするには、`$store.state`を使用します。

```vuejs
<template>
  <div>
    <p>Count: {{ count }}</p>
  </div>
</template>

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

### 3. ゲッターの定義と使用

ゲッターは、ステートの派生データを計算するための関数です。コンポーネントからゲッターにアクセスするには、`$store.getters`を使用します。

```vuejs
<template>
  <div>
    <p>Count: {{ count }}</p>
  </div>
</template>

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

### 4. ミューテーションの定義と使用

ミューテーションは、ステートを変更するための唯一の方法です。ミューテーションは同期的に動作し、コンポーネントからコミットされます。

```vuejs
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.getters.getCount;
    }
  },
  methods: {
    increment() {
      this.$store.commit('increment');
    },
    decrement() {
      this.$store.commit('decrement');
    }
  }
};
</script>
```

### 5. アクションの定義と使用

アクションは、非同期処理を含む操作を行うために使用されます。アクションはコミットを介してミューテーションを呼び出します。

```vuejs
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.getters.getCount;
    }
  },
  methods: {
    increment() {
      this.$store.dispatch('increment');
    },
    decrement() {
      this.$store.dispatch('decrement');
    }
  }
};
</script>
```

### 6. モジュール化によるスケーラブルな状態管理

大規模なアプリケーションでは、ストアをモジュール化して状態管理をスケーラブルにします。各モジュールは独自のステート、ゲッター、ミューテーション、アクションを持ちます。

`src/store/modules/counter.js`

```jsx
const state = {
  count: 0
};

const getters = {
  getCount: state => state.count
};

const mutations = {
  increment(state) {
    state.count++;
  },
  decrement(state) {
    state.count--;
  }
};

const actions = {
  increment({ commit }) {
    commit('increment');
  },
  decrement({ commit }) {
    commit('decrement');
  }
};

export default {
  state,
  getters,
  mutations,
actions };
```

`src/store/index.js`

```jsx
import Vue from 'vue';
import Vuex from 'vuex';
import counter from './modules/counter';

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    counter
  }
});
```

### まとめ

この記事では、Vuexを使った状態管理について基本的な概念と使い方を記述しました。ステート、ゲッター、ミューテーション、アクションの基本的な使い方を学び、モジュール化によるスケーラブルな状態管理も紹介しました。これらの手法を活用できれば、複雑なアプリケーションの状態管理も行えると思います。