【Nuxt.js】Vuex基礎編②stateを複数使ってみよう

# 前置き

今回は前回の基礎編に続き、
stateが複数ある場合の書き方です✍️
基礎編でVuexの基本的な解説はしています！
また基礎編のコードに追記するので
そちらを確認しながらやってみてください🌟

Vuex基礎編はこちら
https://note.com/aliz/n/n497914c981c8#i8l88


# やりたいこと
![coun 3.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/0d1a1774-2489-9f10-1abd-f94247e63ea0.gif)

基礎編のカウンターを2つに増やします！
これだけ！！！

# NGパターン
![ count.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/7d36d489-3754-d61e-e3ac-6e3f1381e52b.gif)

まずはNGパターンから。
まずはstateにsubCounterを追加。
mutationsなどにも同様に
subCounterについて追記します✍️

**が！**
これだと後述したsubCounterに
全てがまとまってしまいます。。。

```vue:counter.js
export const state = () => ({
  counter: 0,
  subCounter: 0,
})

export const mutations = {
　setIncrease(state) {
  　state.counter++
　},
　setDecrease(state) {
  　state.counter--
　},
　setIncrease(state) {
  　state.subCounter++
　},
　setDecrease(state) {
  　state.subCounter--
　},
}

export const getters = {
　counter: state => {
  　return state.counter
　},
　subCounter: state => {
  　return state.subCounter
　}
}
```

```vue:Counter.vue
<template>
 <div>
  <div class="container">
    <button @click="$store.commit('counter/setIncrease')">Increase</button>
    <button @click="$store.commit('counter/setDecrease')">Decrease</button>
    {{ counter }}
  </div>
  <div class="container">
    <button @click="$store.commit('counter/setIncrease')">Increase</button>
    <button @click="$store.commit('counter/setDecrease')">Decrease</button>
    {{ subCounter }}
  </div>
 </div>
</template>

<script>
export default {
 computed: {
  counter () {
    return this.$store.getters['counter/counter']
  },
  subCounter () {
    return this.$store.getters['counter/subCounter']
  },
 },
}
</script>
```

```vue:index.vue
<template>
 <div class="container">
  <Counter />
 </div>
</template>

<script>
import Counter from '~/components/Counter.vue';

export default {
 components: {
  Counter,
 },
}
</script>
```

# OKパターン
![coun 3.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/aa0bb0ae-80ba-252a-a817-43f53f208470.gif)

ということで
mutationsを一つに統一しましょう⭕️
**第二引数indexを使って
・0の場合はcounterを
・1の場合はsubCounterを
変動させます。**

こんかいはその2パターンで良いので
if文のelse ifまであればOKですね🎵😄

```vue:if文
if (条件式1) {
 条件式1がtrueの時の処理
} else if (条件式2) {
 条件式1がtrueの時の処理
} else {
  上記以外の全ての時の処理
}
```

追加の引数の書き方は公式参照です✍️
https://vuex.vuejs.org/ja/guide/mutations.html#追加の引数を渡してコミットする


**🎈変更箇所のみ記載します🧸**

```vue:counter.js
export const mutations = {
 setIncrease(state, index) {
   if (index === 0) {
     state.counter++
   } else if (index === 1) {
     state.subCounter++
   }
 },
 setDecrease(state, index) {
   if (index === 0) {
     state.counter--
   } else if (index === 1) {
     state.subCounter--
   }
 },
}
```

**Counter.vue**
ここで第二引数に0, 1を入れて
counterとsubCounterの区別をしています🌟

```vue:Counter.vue
<template>
 <div>
   <div class="container">
     <button @click="$store.commit('counter/setIncrease', 0)">Increase</button>
     <button @click="$store.commit('counter/setDecrease', 0)">Decrease</button>
     {{ counter }}
   </div>
   <div class="container">
     <button @click="$store.commit('counter/setIncrease', 1)">Increase</button>
     <button @click="$store.commit('counter/setDecrease', 1)">Decrease</button>
     {{ subCounter }}
   </div>
 </div>
</template>
```

これで完成です🤗🎉

# 完成コード

```vue:counter.js
export const state = () => ({
 counter: 0,
 subCounter: 0,
})

export const mutations = {
 setIncrease(state, index) {
   if (index === 0) {
     state.counter++
   } else if (index === 1) {
     state.subCounter++
   }
 },
 setDecrease(state, index) {
   if (index === 0) {
     state.counter--
   } else if (index === 1) {
     state.subCounter--
   }
 },
}

export const getters = {
 counter(state) {
   return state.counter
 },
 subCounter(state) {
   return state.subCounter
 }
}
```

```vue:Counter.vue
<template>
 <div>
   <div class="container">
     <button @click="$store.commit('counter/setIncrease', 0)">Increase</button>
     <button @click="$store.commit('counter/setDecrease', 0)">Decrease</button>
     {{ counter }}
   </div>
   <div class="container">
     <button @click="$store.commit('counter/setIncrease', 1)">Increase</button>
     <button @click="$store.commit('counter/setDecrease', 1)">Decrease</button>
     {{ subCounter }}
   </div>
 </div>
</template>

<script>
export default {
 computed: {
   counter () {
     return this.$store.getters['counter/counter']
   },
   subCounter () {
     return this.$store.getters['counter/subCounter']
   },
 },
}
</script>
```

```vue:index.vue
<template>
 <div class="container">
   <Counter />
 </div>
</template>

<script>
import Counter from '~/components/Counter.vue';

export default {
 components: {
   Counter,
 },
}
</script>
```


**記事が公開したときにわかる様に、
note・Twitterフォローをお願いします😀**
https://twitter.com/aLizlab