[Vue3] pinia 사용하기

그냥 귀여워서 첨부함. 파인애플이라니 ...흑흑... 너무 귀여워 ㅜㅜ

1. 피니아란? 

 - 피니아라고 읽음.

 - composition API 방식으로 사용하는 store 라이브러리.

 - vuex4와는 약간 차이 있으나, vuex5와 거의 대부분 동일하기 떄문에 pinia를 vue.js 에서 공식지원 하기로 했다.

 - 아래의 예시에서도 vue2, options API 방식이 아니라 Vue3, Composition API 방식으로 사용 하도록 한다.

 

2. 설치하기 

yarn add pinia

# 또는 npm으로

npm install pinia

 

3. 세팅하기

 3.1. main.js 세팅

import { createPinia } from 'pinia'

const app = createApp(App)
const pinia = createPinia()

use(pinia)

 

 3.2 store 폴더 / store.js 파일 세팅

   - src 폴더 내에 stores 폴더를 생성해서 그 안에 store.js 파일을 만든다.

   - store.js 파일 셋팅

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

export const useCounterStore = defineStore('store', () => {

  변수, 함수 넣기

  return { 변수, 함수명 }
})

 

** 공식 페이지에 있는 샘플 코드 적용 **

import { defineStore } from 'pinia'

import {

  ref,

  computed,

} from 'vue';

export const useCounterStore = defineStore('store', () => {

 

  const count = ref(0);

  const name = ref('숩숩');

  const doubleCount = computed(() => count.value + 10);

 

  function increment() {

    count.value += 10;

  }

  return { count, name, doubleCount, increment }

})

 

3.3 Component 셋팅

  - Child.vue 파일 생성

<template>
  <div class="child">
    {{ name }}의 자산 : {{ doubleCount }} 억원
    <button @click="store.increment">increment</button>
  </div>
</template>

<script setup>
import { useCounterStore } from "@/stores/store";
import { storeToRefs } from "pinia";
import { onMounted } from "vue";


const store = useCounterStore();
const { name, doubleCount } = storeToRefs(store);
 
</script>

 

 

4. 랜더링 된 화면

increment 버튼을 누르면 10억씩 증가한다. 

store에 저장되어있는 데이터와 함수가 child 컴포넌트에서 불러와 진다.

 

 

5. Setup Stores

  Option Stores 와 Setup Stores 는 Pinia 에서 Store를 정의 하는 방식이다. 

  Option Stores 는 Options API 를 사용하는 방식과 유사하다. 스토어 안에서 state, actions, getters 프로퍼티를 사용하여 데이터를 활용 한다.

 

   Setup Stores 는 Composition API를 사용하는 방식과 유사하다. 

   state 역할을 하던 것이 ref() 가 되고

   getters 역할을 하던 것이 computed() 로 대체된다

   actions 는 function() 로 대체 되었다. 

 

  공식문서에서는 둘중에 어떤 것을 선택해야 할지 모르겠다면 Option Stores를 사용해보라고 하지만, 

  Composition API 방식에 익숙해질 필요가 있다고 생각한다. 

 

 샘플 코드는 아래와 같다. (가 아니라 위에도 있네?)

 store.js

export const useStore = defineStore('store', () => {
  const count = ref(0);
  const name = ref('Eduardo');
  const doubleCount = computed(() => count.value * 2);

  function increment() {
    count.value++
  }

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

선언한 속성들을 sotre 하단에서 return 해주고 있다는 특징이 있다.