전치

이번은 전회의 기초편에 이어,
state가 복수 있는 경우의 쓰는 방법입니다✍️
기초편으로 Vuex의 기본적인 해설은 하고 있습니다!
또한 기초편의 코드에 추가하기 때문에
그쪽을 확인하면서 해보세요 🌟

Vuex 기초편은 이쪽
h tps : //에서. 코 m / 아 · 응 / 응 497914c981c8 # 8l88

하고 싶은 일

기초편의 카운터를 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
변동시킵니다.

안녕하세요, 그 두 패턴으로 좋기 때문에
if 문의 else if까지 있으면 OK입니다 🎵😄

if 문

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

추가 인수를 작성하는 방법은 공식 참조입니다 ✍️
https://vuex.vuejs.org/en/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 팔로우 해주세요 😀
htps : // 라고 해서 r. 코 m/아→아 b