vuex에서 프로토타입에 액세스할 수 있도록 설정

vuex에서 프로토타입에 액세스할 수 있도록 설정

인마이app.js파일 vue에서 번역을 사용할 수 있도록 빌드합니다.

Vue.prototype.trans = string => _.get(window.i18n, string);

vue 파일에서는 정상적으로 동작하고 있습니다.

{{ trans('translation.name') }}

문제는 제가 지금 쓰고 있는 그대로vuex모듈 내의 몇 가지 내용을 번역해야 합니다.

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default {
    namespaced: true,

    state: {
        page: 1,
        criterias: [
            {
                name: this.trans('translation.name'),
                filter: "life",
                active: false
            }
     }
 }

하지만 여기서는this.trans('translation.name')동작하지 않습니다.어떻게 작동시킬 수 있을까요?

Vuex 프로토타입을 변환하는 것은 잘못된 작업이라고 생각합니다.이 경우, 실제로는 필요하지 않습니다.

파일 생성만 하면 됩니다.localization.js파일 내의 i18n 플러그인을 인스턴스화합니다.또한 동일한 i18n 인스턴스를 반환하기 위해 명명된 함수를 내보냅니다.

// localization.js

const i18n = new VueI18n({ ... });

export const getLocalization = () => i18n;

export default i18n;

그런 다음 Vuex 모듈에서getLocalization기능하고 실행함으로써 같은 것을 얻을 수 있습니다.i18n인스턴스(instance) 및 이를 사용하여 변환을 수행합니다.

// vuex-module.js

import Vue from 'vue';
import Vuex from 'vuex';
import { getLocalization } from './localization';

Vue.use(Vuex);

const i18n = getLocalization();

export default {
  state: {
    criteria: i18n('translation.name'),
  },
}

해결 방법을 제안할 수 있습니다.의 초기화를 이동할 수 있습니다.criterias부터store.js고객님께App.vue변환 사용.

store.displaces를 설정합니다.

state: {
    page: 1,
    criterias: []
},

mutations: {

    setCriterias(state, payload) {
        state.criterias = payload;
    },

}

App.vue

beforeMount() {

   this.$store.commit( 'setCriterias' , [

        {
            name: this.trans('translation.name'),
            filter: "life",
            active: false
        }

   ])

}

번역 콘텐츠로서window.i18n어쨌든 글로벌하다, 왜 다른 것을 정의하지 않는가?trans추가하는 방법과 유사한 방법Vue.prototype당신의 스토어 모듈에 있나요?

나중에 이 메서드를 두 곳에서 편집해야 하는 경우 이 한 가지 메서드로 변환 모듈을 정의하고 Vue.protype을 설정한 장소와 스토어 모듈 내에서 모두 사용합니다.

언급URL : https://stackoverflow.com/questions/54293483/make-prototype-accessible-in-vuex