Vuex VS Pinia

Vuex와 비교해보고 어떤 장점이 있는지 알아보자.

Vuex와의 차이점

Vuex란?

Vue3 composition API 이전 Vue2 options API를 사용할때 사용했던 전역 상태 관리 도구입니다.

Vuex는 Vue3 부터는 버전 업그레이드를 중단했으며 Vue3의 공식적인 전역 상태관리 도구인 Pinia를 사용하라고 권장하고 있습니다.

모듈 vs 다중 스토어(store)

Vuex에서는 앱 전체에서 사용하는 중앙 스토어를 하나 만들어 두고 한 스토어 안에 여러 개의 모듈을 연결하여 사용합니다.

각 컴포넌트에서는 앱 전체에서 유일하게 존재하는 스토어를 참조하여 각 모듈안의 상태 값을 가져다 사용했습니다.

프로젝트 내부에서 Vuex의 폴더 구조

src/
|-- store/
    |-- index.js             # Main store file where you combine modules
    |-- state.js             # Root state (optional, can be in index.js)
    |-- mutations.js         # Root mutations (optional, can be in index.js)
    |-- actions.js           # Root actions (optional, can be in index.js)
    |-- getters.js           # Root getters (optional, can be in index.js)
    |-- modules/
        |-- user.js          # User module (state, mutations, actions, getters)
        |-- cart.js          # Cart module (state, mutations, actions, getters)
        |-- products.js      # Products module (state, mutations, actions, getters)
        # ... other modules

프로젝트 내부에서 Pinia의 폴더 구조

src/
|-- stores/
    |-- userStore.js        # User store with its own state, actions, getters
    |-- cartStore.js        # Cart store with its own state, actions, getters
    |-- productsStore.js    # Products store with its own state, actions, getters
    # ... other stores

Pinia는 여러 모듈을 만들어 하나의 스토어에 할당하는 개념이 아닌, 여러 개의 스토어를 생성하는 개념입니다.

Vue2에서의 Vuex 사용방식

모듈 위치 파악이 어렵다.

options api에서 각 모듈의 상태값과 액션들을 가져와서 사용해야 합니다.

이때 불편한 점으로 각 모듈간 getter, state, action 이름이 동일할 경우 충돌이 일어날 수 있는데 namespace로 충돌을 방지할 수 있습니다.

하지만 namespace를 사용하더라도 최상위 스토어에서 namespace와 모듈 이름이 다르게 선언되고 모듈이 여러개가 정의되는 경우 모듈 코드를 찾기 까다롭고 복잡해집니다.

namespace 사용 예시

<script>
import { mapGetters, mapActions } from 'vuex';

export default {
  name: 'UserProfileComponent',
  computed: {
    ...mapGetters('userProfile', ['userName'])
  },
  methods: {
    ...mapActions('shoppingCart', ['updateUserName'])
  }
};
</script>

options API를 사용하는 UserProfileComponent의 구현 내부입니다. userProfile, shoppingCart 두개의 스토어를 사용합니다.

// store/user.js
export const userModule = {
  namespaced: true,
  state: { ... },
  // other options like mutations, actions, getters
};

// store/cart.js
export const cartModule = {
  namespaced: true,
  state: { ... },
  // other options
};

// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
import { userModule } from './user';
import { cartModule } from './cart';

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    userProfile: userModule,
    shoppingCart: cartModule
  }
});

Vuex 스토어가 선언될 때 각 모듈의 namespace 이름은 userProfile, shoppingCart로 선언되었는데 파일이름은 ~Module로 표기되고 있습니다. store/index.js 파일에 들어가 실제 모듈 파일 이름을 확인하기 전까지는 모듈 정의부를 보기가 어려워집니다.

Vue3에서 Pinia 사용

리엑트 훅처럼 스토어를 직접 각 컴포넌트 레벨로 가져와 사용하기 때문에 정의부를 탐색하기 쉽습니다.

<template>
  <div>
    <p>User name: {{ userName }}</p>
    <button @click="updateName('Jane Doe')">Change Name</button>
  </div>
</template>

<script>
import { useUserStore } from '@/stores/userStore';

export default {
  setup() {
    const userStore = useUserStore();
    const updateName = (newName) => userStore.updateName(newName);

    return { userName: userStore.name, updateName };
  },
};
</script>