javascript - Make prototype accessible in vuex - Stack Overflow

admin管理员组

文章数量:1402806

In my app.js file I build this so I can use translation in vue:

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

This is working great in my vue files:

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

The problem is that I'm using vuex and I need to translate some things in a module:

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
            }
     }
 }

But here this.trans('translation.name') is not working. How could I get this to work?

In my app.js file I build this so I can use translation in vue:

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

This is working great in my vue files:

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

The problem is that I'm using vuex and I need to translate some things in a module:

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
            }
     }
 }

But here this.trans('translation.name') is not working. How could I get this to work?

• javascript
• vue.js
• prototype
• vuex

Share Improve this question Follow asked Jan 21, 2019 at 15:53 JamieJamie 10.9k3535 gold badges109109 silver badges199199 bronze badges 7

• A workaround, could be create a sepated .js with your prototype and the import Vue from 'vue' and importing this file into your store.js instead of node_modules/vue – PJ.Wanderson Commented Jan 21, 2019 at 16:41
• Vue.trans('translation.name') instead of this.trans('translation.name') – ljubadr Commented Jan 21, 2019 at 18:31
• Both not working unfortunately – Jamie Commented Jan 31, 2019 at 10:38
• Isn't this._vm.trans working instead? – P3trur0 Commented Jan 31, 2019 at 15:48
• Nope it does not work :( – Jamie Commented Jan 31, 2019 at 15:59

 |  Show 2 more ments

3 Answers 3

Sorted by: Reset to default 8 +100

I would call mutating Vuex prototype as a bad practice and in this case, it's really not necessary.

Simply create a file called localization.js and instantiate the i18n plugin in that file. Plus export a named function to return the same i18n instance.

// localization.js

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

export const getLocalization = () => i18n;

export default i18n;

Then in your Vuex module import the getLocalization function and execute it to get the same i18n instance and do translations using it.

// 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'),
  },
}

I can suggest you a workaround. You can move the initialization of criterias from store.js to your App.vue, using a mutation.

store.js

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

mutations: {

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

}

App.vue

beforeMount() {

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

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

   ])

}

As your translation content window.i18n is global anyhow, why not define another trans method similar to the one you add to Vue.prototype in your store module?

If you are concerned about having to edit this method in two places later on, define a translation module with this one method and use it on both places, where you set Vue.prototype and inside your store module.

本文标签： javascriptMake prototype accessible in vuexStack Overflow