pinia와 vuex

이 둘의 차이는 무엇일까?

• 피니아에는 뮤테이션이 없다. 뮤테이션을 사용하는 것은 너무 복잡하기 때문이다.
  • 뮤테이션과 액션의 차이
    • 뮤테이션은 상태를 바꿀 수 있는 유일한 방법이다.
    • 뮤테이션은 비즈니스 로직을 포함하지 않는다. 단지 상태를 변경하는 것만을 신경쓴다. 뮤테이션은 무조건 동기적이어야 한다.
    • 이에 반해 액션은 비즈니스 로직이다.
    • 액션은 하나 이상의 뮤테이션을 커밋할 수도 있고, 무거운 로직(비동기 로직)을 포함할 때 사용한다.
  • 그렇다면 왜 피니아는 뮤테이션을 없앴을까?
    • verbose하다. 뮤테이션과 액션을 동시에 사용하는 로직 자체가 굉장히 복잡하다. 따라서 액셩 안에서 상태 변경과 비즈니스 로직을 동시에 처리할 수 있도록 한다.
• 피니아는 타입스크립트를 완전히 지원한다. 그리고 자바스크립트 코드에 대한 자동완성도 해 준다.
• 원하는 만큼 스토어를 여러 개 만들어 모듈화 시켜줄 수 있다. 간편하게 그냥 만들어서 사용하면 된다!

왜 피니아를 사용하나?

• api가 훨씬 심플하다.

  • mutation이 없다. 뷰엑스에서 mutation과 action을 같이 사용하는 코드를 보자. 굉장히 이해하기 어려워보인다. mutation을 action 안에서 사용하기 위해 action이 commit을 인자로 받고 그 commit을 사용해서 Mutation을 사용하면서 state를 mutation 안에서 변경하고….

    

    피니아는 mutation이 없다. 그냥 state를 변경하는 로직을 action 안에서 해 주면 된다.

  • state, getter, mutation, action을 사용하기 위해서는 따로 context 객체 안의 함수를 사용해야 한다. mutation은 commit, action은 dispatch… 피니아는 이렇게 context 객체를 사용할 필요 없이, 마치 자바스크립트 메서드와 비슷하게 바로 접근해서 사용할 수 있다.

• devtool
• 타입스크립트 서포트와 자동완성
  • 자동완성에서 훨씬 편리함을 줄 수 있다.

설치

사용법

기본적인 store 사용법

예를 들어 counter에 관련된 store를 만든다고 생각해보자. stores/counter.js에 defineStore로 스토어를 만들어 export할 수 있다.

스토어를 선언하는 방법은 크게 setup stores와 option stores로 나눌 수 있다. 그냥 형식만 다르고, 마치 vue3에서 composition api와 options api 크게 두 가지로 컴포넌트를 구성하는 것과 같다.

vuex store과 비교해보면

• 피니아의 경우, 스토어 안에서 state, getters, actions 모두 context 객체를 거치지 않 store(this) 객체 내에서 바로 접근 가능하다.
  • 뷰엑스의 경우에도 mutations, actions 객체 내에서 state를 변수로 받지 않고도 this 객체로 상태에 접근이 가능하긴 하다. 다만, this 객체 내의 state 객체를 통해서, 즉 두 단계를 거쳐야 접근이 가능하다.
  • 뷰엑스의 경우 actions는 context 객체를 인자로 받아, state, getters, commit, dispatch를 사용할 수 있다. 피니아의 경우 context 객체가 필요 없이 바로 this를 사용해서 상태, getters, actions에 접근이 가능하다.
• 피니아의 독특한 점은, 스토어를 마치 composition api와 같이 setup 형식으로 사용할 수 있다는 점이다.

// option store

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    counter: 0
  }),
  getters: {
    doubleCount: (state) => state.counter * 2
		// doubleCount: function () { return this.counter * 2 }
		// 이렇게도 가능하다.
  },
  actions: {
    increment() {
      this.counter++
			console.log(this.doubleCount) // getter도 this로 바로 접근 가능.
    }
  }

	return { count, doubleCount, increment }
})

// setup store
import { ref, computed } from 'vue'

export const useCounterStore = defineStore('counter', () => {
	const count = ref(0)  // state

	const doubleCount = computed(() => {  // getter
		return count.value * 2
	})

	function increment() {  // action
		count.value++
	}

	return { count, doubleCount, increment }
})

// vuex store
import { createStore } from 'vuex'

export default createStore({
  state: {
    counter: 0
  },
  getters: {
    doubleCount: (state) => state.counter * 2
    // doubleCount: function () { return this.state.counter * 2 }
    // 이렇게는 안 된다.
  },
  mutations: { // pinia는 mutation이 없다.
    increment_mutation (state) {
      state.counter++
    }
		// increment_mutation () {
    //   this.state.counter++
    // }
		// 가능하다.
  },
  actions: {
    increment_action ({ commit }) { // context 객체를 받아와 사용할 수 있다.
      commit('increment_mutation')
    }
		// increment_action ({ commit }) {
    //   this.commit('increment_mutation')
    // }
		// 가능하다.
  }
})

각 store는 고유의 id가 필요한데, 이는 vue devtool에 마운트시켜서 사용하기 위함이다.

피니아, 뷰엑스 스토어 비교