VueJS/NuxtJS 스토어에서 $i18n 사용에 관해

프로젝트에 언어팩 작업을 하면서 API 통신에 관련된 리턴 메시지 값들도 번역된 메시지들로 보내주고 싶었으나, 현재 프로젝트들의 비동기 처리 통신 방식들은 모두 Vuex Actions 스토어 함수로 관리하고 있는데, 왜 인지 접근할 수 없다.

this.$i18n.t('key value message')

---> Undefined ...

이렇게 삽질하며 알게 된 사실이 하나 있는데

i18n 모듈은 기본적으로 스토어 컨텍스트에 주입되지 않으며, "this" 키워드도 모듈에 액세스 할 수 없다.

그렇다고 i18n을 사용하기 위해서 스토어에 컨텍스트를 매개변수로 넣어주는 것은 좋은 현상은 아니다.

대안 1.

번역 파일의 키를 스토어 저장소의 값으로 저장하거나 오브젝트의 ID를 동일한 번역 키로 사용한 다음, 구성 요소에서 $t() 함수를 사용하여 번역하는 것이 더 나은 방법이 아닐까 싶다.

@store.js

const state = {
    sortMethods: [
        {
            id: "hello",
            keyName: "hello"
        }
    ]
}

@component.vue

<template>

    <option v-for="method in $store.state.sortMethods" :key="method.id">
        {{ $t(method.keyName) }}
    </option>

</template>

하지만 이 방법은 언어팩 작업에 너무 노가다가 되고 손이 많이가게 된다.. 또한 스토어에서 직접 사용하는 것은 아니기 때문에

다른 방법을 찾아봐야 함

---

대안2.

Vue / Nuxt에는 글로벌 전역변수를 설정 할 수 있으며, 방법은 매우 간단하다. 이를 활용하여 스토어에서 i18n 모듈을 사용할 수 있다.

nuxt.js에서는 플러그인에 context와 inject를 사용하여 글로벌 변수로 선언하여 함수 및 변수를 사용할 수 있음.

플러그인 경로에 세팅할 i18n js 파일을 생성하기

plugins/i18n.js

export default (context, inject) => {

    const i18n = {
         translate(key) {
            return context.app.i18n.t(key);
        },
    }

    inject('i18n', i18n)
}

위와 같이 작성하고

nuxt.config.js에 plugins 등록하기

plugins: [
     '~/plugins/i18n.js'
]

이렇게 하면 this.$i18n으로 글로벌 변수를 선언하여 사용할 수 있으며,

스토어에서도 적용이 가능함.

store/index.js

export const actions = {
     async logout(store) {
         return await fun_name(auth).then((res) => {
             return this.$i18n.translate('success');
         });
     }
}

이런식으로 글로벌 변수에 translate(key)함수에 작성한 언어팩 번역 키 값을 넣어서 리턴받아 사용할 수 있음.

 

VueJS @2.* 에서 마찬가지로 방식은 조금 차이가 있지만 Vue.prototype을 사용하여 글로벌 타입으로 사용할 수 있음