Vue State

---

🧠 Vue 상태관리란?

정의

Vue 상태관리는 컴포넌트 간에 공유되는 데이터를 중앙에서 관리하는 방식이다.

상태를 한곳에서 다루면 데이터 흐름을 읽기 쉽고, 여러 컴포넌트가 같은 값을 공유하기 편하다.

📦 Pinia

• Vue에서 자주 사용하는 상태 관리 라이브러리다.
• Store를 기준으로 상태를 관리한다.
• Vue 3와 잘 맞는다.

🧩 Pinia 구조

Store

• 상태를 보관하는 중앙 저장소다.
• 보통 stores 디렉터리에 생성한다.

import { ref, computed } from "vue";
import { defineStore } from "pinia";

export const useCounterStore = defineStore("counter", () => {
  const count = ref(0);
  const doubleCount = computed(() => count.value * 2);

  function increment() {
    count.value++;
  }

  return { count, doubleCount, increment };
});

State

• 반응형 상태다.
• 값 자체를 직접 공유한다.

const count = ref(0);

Getters

• 계산된 값을 제공한다.
• computed와 비슷하게 사용할 수 있다.

const doubleCount = computed(() => count.value * 2);

Actions

• 상태를 변경하는 메서드다.
• 직접 값을 바꾸는 로직을 함수로 묶어두면 관리가 쉽다.

function increment() {
  count.value++;
}

🛠️ 사용 예시

import { useCounterStore } from "@/stores/counter";

const counter = useCounterStore();

const increaseCount = () => {
  counter.increment();
};

🔐 라우터에서 사용할 때

• 로그인 상태나 권한 체크에 자주 활용한다.
• 라우터 가드와 함께 쓰면 흐름 제어가 편하다.

🔌 Plugin

• Pinia에 기능을 추가하는 도구다.
• 예를 들면 LocalStorage 지속 저장 같은 기능을 붙일 수 있다.

📌 정리

• Vue 상태관리는 컴포넌트 간 공통 데이터를 중앙에서 관리하는 방식이다.
• Pinia에서는 state, getters, actions 개념을 기억하면 된다.
• Vue-LocalStorage, Vue-routing, Vue-프로젝트-Init과 함께 보면 흐름이 잘 보인다.

---

연결문서

• Vue-프로젝트-Init
• Vue-LocalStorage
• Vue-환경변수
• Vue-routing
• Vuejs