Vuex 스토어 내의 vue-i18n에서 $t를 사용하여 정적 문자열을 초기화하는 방법

Vuex 스토어 내의 vue-i18n에서 $t를 사용하여 정적 문자열을 초기화하는 방법

내 vuex 스토어 모듈에는 Vuetify 드롭다운 선택 상자에 데이터 소스로 제공하는 distanceData가 있습니다.

provinceData:  [
            {value:"AB", text: "Alberta"},
            {value:"BC", text: "British Columbia"},
            ...
        ],

제가 할 수 있어요.import i18n from '../plugins/i18n'콘솔 출력으로 확인됩니다.i18n.t('province.BC')리소스 파일에서 적절한 텍스트 반환

i18n.t('province.BC') British Columbia
click onLanguageChange fr
i18n.t('province.BC') British Columbia (Fr)

그런데 이 번역들을 데이터 소스에 삽입하려면 어떻게 해야 하나요?

provinceData:  [
            {value:"AB", text: ???i18n.t('province.AB')??? },
            {value:"BC", text: ???i18n.t('province.BC')??? },
            ...
        ]

이제 i18n.t('province')로 포장하여 실수를 깨달았습니다.AB')를 백틱으로 변환합니다.다음은 영어 전용 메시지를 표시하는 수정 버전입니다.

provinceData:  [
            {value:"AB", text: i18n.t('province.AB') },
            {value:"BC", text: i18n.t('province.BC') },
            ...
        ]

또한 현재 로케일을 전환하면 다시 초기화됩니까?

추신. 이 데이터 소스의 getter를 누르면 현재 로케일에 따라 검색된 메시지를 볼 수 있습니다.하지만 드롭다운 상자가 다시 로드되지 않습니다.그게 문제야

다음 getter는 호출할 때마다 올바른 번역문을 인쇄합니다.

provinceData: (state) => {
            console.log("i18n.t('province.BC')",i18n.t('province.BC'));
            return state.provinceData;
        },

저장소 내의 distributeData는 변환자 이외에는 수정할 수 없습니다.그래서 이 어레이를 게터에 직접 작성하기로 했습니다만, 매우 고속으로 되어 있었습니다.

provinceData: ( state ) =>
        {
            const provinceData = [ "AB", "BC", "MB", "NB", "NF", "NT", "NS", "NU", "ON", "PE", "QC", "SK", "YT" ];
            let provinces = [];

            provinceData.forEach( (province) => {
                provinces.push
                ({
                    value : province,
                    text  : i18n.t( 'province.'+province )
                })
            })

            return provinces;
        }

언급URL : https://stackoverflow.com/questions/64249237/how-to-use-t-from-vue-i18n-inside-vuex-store-to-initialize-static-strings