[Vue3] Provide와 inject 한 곳에서 정리하여 불러오기

이슈

공통으로 정의된 alert문구를 한곳에서 정리하여 불러와서 사용하고 싶음.

 

해결 Provide와 inject

*Provide와 inject란 ?

컴포넌트간에 통신하려면 부모 - 자식 이런식으로 거쳐야하는데 단방에 통신할 수 있는 것이라고 보면 된다.

따라서
1. main.ts에서 Provide로 메세지를 가지고 있는 파일를 불러온 후 (language에 따라서 한국어, 영어),
2. main.ts는 완전 공통 ts니까 모든 ts에서 접근할 수 있으므로 
3. 각각의 페이지에서 inject로 가져와 사용하려고 ! 하고 보니까 그것도 번거로워서
==> message/index.ts 에서 inject로 가져와서 그것을 export해주고,
==> 각각의 페이지에서는 message/index.ts 만을 import하여 사용하는 방식으로 처리하였다.

 

1. src 폴더 밑에 messages 폴더 생성 후 나라별로 폴더 생성

src
 └ messages 폴더
     └ index.ts  //얘는 나중에 각각페이지에서 부를 공통 파일
     └ ko 
         └ index.ts //한국어로 된 메세지
     └ en
         └ index.ts //영어로 된 메세지

 

2. ko,en 나라별 폴더 ts안에 나라별 메세지 작성 

//ko예시)
const Messages = {
  SystemError: '시스템 오류가 발생하였습니다. 잠시 후 다시 시도해주세요.',
  APIFail: '오류가 발생하였습니다. 잠시 후 다시 시도해주세요.',
  SaveSuccess: '저장 되었습니다.',
  SaveFail: '등록하신 정보를 확인해주세요.',
};

export default Messages;

 

3. main.ts 에 Provide로 가져오기

const lang = store.getters['commons/lang'];
app.provide('$messages', (await import (`./messages/${lang}/index.ts`)).default);

 

 

4. messages/index.ts 에서 inject로 가져오기 

import { inject } from 'vue';

export default function useMessages() {
  const message = inject('$messages')

  return message;
}

 

5. 사용할 페이지에서 message 가져와서 사용하기

import useMessages from '@/messages';
const messages = useMessages();