前置き
今回は前回の基礎編に続き、
stateが複数ある場合の書き方です✍️
基礎編でVuexの基本的な解説はしています！
また基礎編のコードに追記するので
そちらを確認しながらやってみてください🌟
Vuex基礎編はこちら
やりたいこと
基礎編のカウンターを2つに増やします！
これだけ！！！
NGパターン
まずはNGパターンから。
まずはstateにsubCounterを追加。
mutationsなどにも同様に
subCounterについて追記します✍️
が！
これだと後述したsubCounterに
全てがまとまってしまいます。。。
コード
) file
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
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 } } |
) components
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<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> |
) pages
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<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ですね🎵😄
|
1 2 3 4 5 6 7 |
if (条件式1) { 条件式1がtrueの時の処理 } else if (条件式2) { 条件式1がtrueの時の処理 } else { 上記以外の全ての時の処理 } |
追加の引数の書き方は公式参照です✍️
https://vuex.vuejs.org/ja/guide/mutations.html#追加の引数を渡してコミットする
コード
🎈変更箇所のみ記載します🧸
) file
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
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-- } }, } |
) components
ここで第二引数に0, 1を入れて
counterとsubCounterの区別をしています🌟
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<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> |
これで完成です🤗🎉
完成コード
) file
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
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 } } |
) components
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<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> |
) pages
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<template> <div class="container"> <Counter /> </div> </template> <script> import Counter from '~/components/Counter.vue'; export default { components: { Counter, }, } </script> |