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

14772 ワード
エンジニア Vue.js プログラミング プログラミング初心者 nuxt.js プログラミング テキストリンク

前置き

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

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

やりたいこと

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

NGパターン

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

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

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
　}
}
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>
index.vue
<template>
 <div class="container">
  <Counter />
 </div>
</template>

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

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

OKパターン

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

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

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

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

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

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の区別をしています🌟

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>

これで完成です🤗🎉

完成コード

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
 }
}
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>
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