pinia 설치 및 셋팅

대분류

프레임워크

소분류

Vue.js

설명

상태 관리

유형

Pinia

부유형

설치

속성

pinia

최종 편집 일시

2024/10/29 07:44

생성 일시

2024/01/31 05:40

12 more properties

설치

npm i --save pinia
npm i --save pinia-plugin-persistedstate
Shell
복사

셋팅

•

/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');
JavaScript
복사

•

/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)
  }
);
TypeScript
복사