Vue3 상태 관리 (Pinia, Vuex)

Pinia와 Vuex는 Vue.js 애플리케이션에서 상태 관리를 위한 라이브러리로, Vue.js 애플리케이션에서 상태(state)를 효율적으로 관리하기 위해 사용됩니다.

프로젝트의 구조와 요구사항에 따라 선택하여 사용할 수 있습니다. 

Vuex

Vuex는 Vue.js 애플리케이션에서 공식적으로 제공되는 상태 관리 라이브러리로, Vue.js 애플리케이션에서 전역 상태를 중앙 집중화된 저장소(store)에 저장하고 관리합니다. Vue의 options API를 기반으로 동작하며 Vue.js 애플리케이션의 규모가 크고 복잡할 때 유용하게 사용됩니다. Vuex는 단일 소스의 진실된 상태(single source of truth)를 유지하고, 상태의 변화를 추적하며, 상태를 동기화하여 컴포넌트 간의 데이터 공유와 상태 관리를 용이하게 합니다.

 

store라는 이름의 Vuex 스토어를 생성하는 예시입니다. 

// store.js

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

// 스토어 정의
export default new Vuex.Store({
  // 초기 상태
  state: {
    count: 0
  },
  // 상태를 변경하는 변이(mutations) 정의
  mutations: {
    increment(state) {
      state.count++;
    },
    decrement(state) {
      state.count--;
    }
  },
  // 비동기 로직을 처리하는 액션(actions) 정의
  actions: {
    incrementAsync({ commit }) {
      // 비동기 로직
      setTimeout(() => {
        // 변이 호출
        commit('increment');
      }, 1000);
    }
  },
  // 게터(getters) 정의
  getters: {
    doubleCount(state) {
      return state.count * 2;
    }
  }
});

Vuex 라이브러리를 사용하여 스토어를 생성하고, state, mutations, actions, getters 등의 속성을 사용하여 스토어의 동작을 정의합니다.

위의 스토어를 사용하는 Vue.js 컴포넌트에서는 다음과 같이 스토어를 import하고 사용할 수 있습니다.

// MyComponent.vue

<script>
import store from '@/store';

export default {
  data() {
    return {
      // 컴포넌트의 로컬 데이터
    };
  },
  methods: {
    // 스토어의 상태, 변이, 액션, 게터 사용
    increment() {
      console.log(this.$store.state.count); // 상태 접근
      this.$store.commit('increment'); // 변이 호출
      this.$store.dispatch('incrementAsync'); // 액션 호출
      console.log(this.$store.getters.doubleCount); // 게터 접근
    }
  }
};
</script>

위의 코드는 Vue.js 컴포넌트에서 Vuex 스토어를 사용하는 예시입니다. $store 객체를 통해 스토어의 상태, 변이, 액션, 게터 등에 접근하여 사용할 수 있습니다.

Pinia

Pinia는 Vue.js 애플리케이션에서 Composition API를 기반으로 동작하는 상태 관리 라이브러리로, Vue.js 3에서 새롭게 소개된 Composition API와 함께 사용하기 위해 개발되었습니다. Pinia는 컴포지션 함수(composition function)를 이용하여 상태와 로직을 모듈화하고, 컴포넌트 간에 독립적인 상태 관리를 가능하게 합니다. Pinia는 Vue.js 애플리케이션의 규모가 작거나 중간일 때 유용하게 사용됩니다.

 

useStore라는 이름의 스토어를 생성하는 예시입니다.

// store.js

import { defineStore } from 'pinia';

// 스토어 정의
export const useStore = defineStore({
  // 스토어 고유 키
  id: 'store',
  // 상태 초기화
  state: () => ({
    count: 0
  }),
  // 상태를 변경하는 변이(mutations)와 비동기 로직을 처리하는 액션(actions) 정의
  actions: {
    increment() {
      this.count++;
    },
    decrement() {
      this.count--;
    },
    incrementAsync() {
      setTimeout(() => {
        this.increment(); // 변이 호출
      }, 1000);
    }
  },
  // 게터(getters) 정의
  getters: {
    doubleCount() {
      return this.count * 2;
    }
  }
});

defineStore 함수를 사용하여 useStore라는 이름의 Pinia 스토어를 생성하고, state, actions, getters 등의 속성을 사용하여 스토어의 동작을 정의합니다. mutations 대신 actions를 사용하여 상태를 변경하며, this 객체를 통해 상태에 접근합니다.

위의 스토어를 사용하는 Vue.js 컴포넌트에서는 다음과 같이 스토어를 import하고 사용할 수 있습니다.

// MyComponent.vue

<script>
import { useCounterStore } from '@/store';

export default {
  setup() {
    // 스토어 인스턴스 생성
    const counterStore = useCounterStore();

    // 스토어의 상태, 액션, 게터 사용
    console.log(counterStore.count); // 상태 접근
    counterStore.increment(); // 변이 호출
    counterStore.incrementAsync(); // 액션 호출

    // 스토어의 게터 사용
    console.log(counterStore.doubleCount); // 게터 접근

    return {
      // 컴포넌트 내에서 사용할 변수 또는 메소드 등을 반환
    };
  }
};
</script>

위의 코드는 Vue.js 컴포넌트에서 Pinia 스토어를 사용하는 예시입니다. useCounterStore 함수를 호출하여 스토어의 인스턴스를 생성하고, 해당 인스턴스를 통해 스토어의 상태, 액션, 게터 등에 접근하여 사용할 수 있습니다.

 

store을 컴포넌트 내에서 쉽게 사용하는 법은 아래의 글을 참고해주세요!!

https://sumni.tistory.com/125