[Vue3] Pinia : 2. store에 있는 state 데이터 바꾸는 법

1️⃣ 왜 state를 직접 수정하면 안 될까

• 직접 Vue 파일에서 state를 수정하면 안 됩니다.
  • 예를 들어, name: 'kim'이라는 state 데이터가 있고 100개의 컴포넌트에서 이를 직접 수정하게 되면, 어딘가에서 갑자기 'kim' 대신 123이라는 숫자로 바뀌는 버그가 발생할 수 있습니다.
  • 만약 버그가 생기면 100개의 컴포넌트를 모두 뒤져야 하므로 유지보수가 어렵습니다.
• 해결책:
  • state 수정은 store 파일(Pinia 스토어) 내에서만 관리하여, 버그 발생 시 해당 스토어만 확인하면 되도록 코드를 구성합니다.
  • 이런 관리 방식을 "state 관리가 용이하다"라고 부르며, Vuex(또는 Pinia)는 상태(state) 관리 라이브러리입니다.

---

2️⃣ 기존 Vuex 방식 (Vue2 문법)

[참고: Vuex에서는 mutations를 통해 state를 변경하도록 강제함]

// Vuex (Vue2) 예시
const store = createStore({
  state () {
    return {
      name: 'kim',
      age: 20,
    }
  },
  mutations: {
    한살더하기(state) {
      state.age++
    }
  },
})

<!-- App.vue (Vue2) -->
<button @click="$store.commit('한살더하기')">버튼</button>

---

3️⃣ Pinia 방식으로 리팩토링 (Vue3 + )

3-1. Pinia 스토어 정의

Pinia에서는 mutations 대신 actions를 사용합니다. 또한 <script setup> 구문을 활용하여 간결하게 작성할 수 있습니다.

// store/user.js
import { defineStore } from 'pinia'


// `defineStore()`의 반환값에 원하는 대로 이름을 지을 수 있지만,
// `use`로 시작해 `Store`로 끝나는 Store의 이름을 사용하는 것이 좋습니다.
// (예: `useUserStore`, `useCartStore`, `useProductStore`)
// 첫 번째 인수는 애플리케이션 내 Store의 고유 ID입니다.
export const useUserStore = defineStore('user', {
  state: () => ({
    name: 'kim',
    age: 20,
  }),
  actions: {
    한살더하기() {
      this.age++
    }
  }
})

3-2. Vue 컴포넌트에서 스토어 사용하기

아래처럼 <script setup>을 사용하여 스토어를 불러오고, 버튼 클릭 시 state를 변경하도록 구현합니다.

<!-- App.vue (Vue3 + Pinia) -->
<template>
  <button @click="userStore.한살더하기()">버튼</button>
</template>

<script setup>
import { useUserStore } from './store/user'
const userStore = useUserStore()
</script>

---

📌 정리

• 직접 state를 수정하면 나중에 버그 발생 시 어디서 수정됐는지 찾기 어려워집니다.
• Pinia를 사용하면 스토어 파일 내에서만 state를 변경하므로, 관리가 훨씬 수월해집니다.
• Vuex에서는 mutations를 통해 state 변경을 강제했지만, Pinia에서는 actions를 사용하여 동일한 역할을 합니다.