[VUE] pinia 사용하기 (vuex 대신)

- vue2, vue3 함께 사용 가능

- vuex 보다 간단하고, 직관적임

• mutations 없음.
• Typescript 를 지원.
• 아주 빠르고 정확한 autocompletion
• namespaced modules 없음
• devtools 공식 지원

 

설치

yarn add pinia
# or
npm install pinia
# or
pnpm install pinia

 

vuejs 의 main.js 에서

import { createApp } from "vue";
import { createPinia } from "pinia";
import App from "./App.vue";

const app = createApp(App);

app.use(createPinia());
app.mount("#app");

vue2 를 사용한다면

import { createPinia, PiniaVuePlugin } from 'pinia'

Vue.use(PiniaVuePlugin)
const pinia = createPinia()

new Vue({
  el: '#app',
  // other options...
  // ...
  // note the same `pinia` instance can be used across multiple Vue apps on
  // the same page
  pinia,
})

 

예제.

Store는 defineStore 를 통해서 생성합니다.

stores/counter.js

Option stores (option api 방식과 비슷) (state, actions, getters)

// stores/counter.js
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0, name: 'Eduardo' }),
  getters: {
    doubleCount: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++
    },
  },
})

Setup Stores (Composition API's setup function 과 비슷) 
  - ref() 는 state
  - computed() 는 getters
  - function() 은 actions

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const name = ref('Eduardo')
  const doubleCount = computed(() => count.value * 2)
  function increment() {
    count.value++
  }

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

 

component 에서 사용 예제

<script setup>
import { useCounterStore } from '@/stores/counter'
import { storeToRefs } from 'pinia'

const store = useCounterStore()
// `name`과 `doubleCount`는 반응형 참조(refs)입니다
// 이것은 플러그인에 의해 추가된 속성들에 대해서도 참조(refs)를 추출하지만,
// 어떠한 액션이나 반응형이 아닌 (참조(ref/reactive)가 아닌) 속성은 제외합니다
const { name, doubleCount } = storeToRefs(store)
// increment 액션은 구조 분해 할당을 통해 추출할 수 있습니다
const { increment } = store
</script>

> Vue3 에서는 구조분해할당을 사용하기 위해 반응형 객채를 toRefs 로 묶어서 반응형을 유지할 수 있도록 지원 합니다.
> storeToRefs 를 사용해야함!

 

여기에서 

Option / Setup 방식 중 어떤 것을 사용해도 상관이 없습니다.

가장 편안하다고 느끼는 API를 선택하세요. 

둘 다 장점과 단점이 있습니다. 

Option 저장소는 작업하기가 더 쉽고 

Setup 저장소는 더 유연하고 강력합니다.

 

아무래도 Vue 에서 사용하는 방식과 비슷하게 쓰면 좋겠죠?

확실히 Option Store 가 직관적이긴 합니다..

그래서 개인적인 생각으로는 Option store가 이해하기 쉽고, 시작하기에 좋을 것 같습니다.

 

전.. 저번에 했던 vuex는 Option Store 였으니, 이번엔 Setup store 방식으로 쓰려합니다