[Vue] Vue3 🍍pinia 사용법

▷ pinia

vue3에서 전역 상태 관리를 할 수 있는 pinia

🍍 설치

npm install pinia

🍍 pinia 설정

main.js

import { createPinia } from 'pinia';

const app = createApp(App);
app.use(createPinia());

src/store/counter.js

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

export const useCounterStore = defineStore('counter', {
  // 초기 상태 지정
  state: () => {
    return { count: 1 };
  },
  getters: {
    doubleCount: state => state.count * 2,
  },
  // 액션 함수 지정
  actions: {
    increment() {
      this.count++;
    },
  },
});

🍍 Setup Stores

Setup Stores

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 }
})

🍍 상태 가져와서 사용하기

<template>
  <div>
    <p>Count: {{ store.count }}</p>
    <p>Count: {{ store.doubleCount }}</p>
    <button @:click="store.increment()"></button>
  </div>
</template>

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

const store = useCounterStore();
</script>

➕ typescript

import { defineStore } from 'pinia';

interface Counter {
  count: number;
}

export const useCounterStore = defineStore('counter', {
  state: () => {
    return { count: 1 } as Counter;
  },
  actions: {
    increament() {
      this.count++;
    },
  },
});

🍍 storeToRefs

store에서 그냥 구조 분해를 하면 해당 객체가 store와 떨어지게 된다.
storeToRefs을 써서 구조 분해를 하면 반응성을 유지할 수 있다.

import { useCounterStore } from '@/store/counter';
const store = useCounterStore();
// const { counter } = store;
const { counter } = storeToRefs(store);
const { increment } = store; // 함수는 그냥 가져오기 가능