[nuxt3] nuxt3 + vuetify3 + pinia + typescript로 todolist앱 만들기 -6- plugins

저번 스토어 수업에서 피냐를 설치해보신 것처럼 plugins는 넉스트에서 사용할 라이브러리를 등록하는 역할을 합니다. plugins에 등록하면 라이브러리를 초기화 할 때 각 라이브러리가 의도한 대로 코드가 동작할 수 있게 해줍니다. (글로벌 변수 등록 등)

import { PiniaPlugin, PiniaPluginContext } from "pinia";

// pinia에서 초기화 할 때 실행해줄 함수
function MyPiniaPlugin({ store }: PiniaPluginContext) {
  store.$subscribe((mutation) => {
    // 스토어 값이 바뀔 때 로그 찍어줌
    if (process.env.MODE === "dev")
      console.log(`[🍍 ${mutation.storeId}]: ${mutation.type}.`);
  });

  // 생성된 시간 리턴해줌
  return { creationTime: new Date() };
}

// plugins 폴더에선 defineNuxtPlugin 함수를 사용해 플러그인을 등록합니다.
export default defineNuxtPlugin(({ $pinia }) => {
  $pinia.use(({ store }: PiniaPlugin & { store: any }) => {
    // 라우터를 피냐의 플러그인으로 넣음(정해진 문법이니 따라 작성해주세요)
    const router = useRouter();
    store.router = markRaw(router);
  });
  // 피냐에 플러그인 등록해줌
  $pinia.use(MyPiniaPlugin);
});

• defineNuxtPlugin 함수에서 nuxtApp을 가져올 수 있고 여기서 플러그인 등록, 초기화 전에 사전 동작 수행 등을 합니다.

// plugins 폴더에선 defineNuxtPlugin 함수를 사용해 플러그인을 등록합니다.
export default defineNuxtPlugin((nuxtApp) => {
	// 사전 동작 수행
	const date = new Date()
  console.log(date.getUTCDate())

	// 등록해줄 플러그인 입력
  nuxtApp.vueApp.use(router)
});

plugins 끝!