pinia 설치 및 셋팅

설치

npm i --save pinia
npm i --save pinia-plugin-persistedstate

셋팅

• /src/main.ts (vue 초기 파일) - 빨간 부분이 pinia

import { createApp } from 'vue';

import App from './App.vue';
import router from './router';
import vuetify from './plugins/vuetify';
import { loadFonts } from './plugins/webfontloader';

import { createPinia } from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'; //pinia 스토리지 관리 플러그인

loadFonts();

const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);

createApp(App).use(router).use(pinia).use(vuetify).mount('#app');

• /src/store/index.ts (store 관리 파일)
  • ref() : state 속성이 됨.
  • computed() : getters가 됨.
  • function() : actions가 됨

  import { defineStore } from 'pinia';
  import { ref } from 'vue';
  
  export const storeName = defineStore(
  	// 스토어 이름 정의
    'yourStore',
    () => {
  		// 객체, 함수 선언 스코프
  		const honey = ref("")
  		return {
  			honey
        // 반환값들 (위에서 생성한 객체, 함수 등등.)
      };
    },
    {
      persist: true, // 지속성-persistence store이 되게 설정 (Composition API)
    }
  );