Ensure prototype is easily accessible within vuex

Question

Ensure prototype is easily accessible within vuex

Within my app.js file, I implemented a functionality to enable translation in Vue:

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

This feature works perfectly when used in my Vue files:

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

However, I encountered an issue while working with vuex and needing to translate some content within 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
            }
     }
 }

In this context, this.trans('translation.name') does not function as intended. How can I resolve this issue and make it work as expected?

javascript vue.js prototype vuex

Answer 1

Answer №1

I believe modifying the Vuex prototype can be considered a less-than-ideal practice, especially when it's not absolutely necessary in this specific scenario.

My recommendation is to create a separate file named localization.js, where you can set up the i18n plugin and export a named function that returns the same i18n instance.

// localization.js

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

export const getLocalization = () => i18n;

export default i18n;

Then, within your Vuex module, import the getLocalization function and invoke it to access the i18n instance for translations.

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

Answer 2

I believe modifying the Vuex prototype can be considered a less-than-ideal practice, especially when it's not absolutely necessary in this specific scenario.

My recommendation is to create a separate file named localization.js, where you can set up the i18n plugin and export a named function that returns the same i18n instance.

// localization.js

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

export const getLocalization = () => i18n;

export default i18n;

Then, within your Vuex module, import the getLocalization function and invoke it to access the i18n instance for translations.

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

Answer 3

Answer №2

If you're looking for a solution, here's an idea: why not try moving the initialization of criterias from store.js to App.vue by using a mutation?

Check out the code below:

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

mutations: {

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

}

In your App.vue, add this beforeMount method:

beforeMount() {

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

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

   ])

}

Answer 4

If you're looking for a solution, here's an idea: why not try moving the initialization of criterias from store.js to App.vue by using a mutation?

Check out the code below:

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

mutations: {

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

}

In your App.vue, add this beforeMount method:

beforeMount() {

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

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

   ])

}

Answer 5

Answer №3

Since your translation content is accessible globally through `window.i18n`, have you considered creating another method similar to the `trans` method you add to `Vue.prototype` in your store module?

If you're worried about having to make changes to this method in two separate locations down the line, you could define a translation module with this single method and import it both where you set Vue.prototype and within your store module.

Answer 6

Since your translation content is accessible globally through `window.i18n`, have you considered creating another method similar to the `trans` method you add to `Vue.prototype` in your store module?

If you're worried about having to make changes to this method in two separate locations down the line, you could define a translation module with this single method and import it both where you set Vue.prototype and within your store module.

Ensure prototype is easily accessible within vuex

Answer №1

Answer №2

Answer №3

Similar questions

Presenting JSON data in a table format on-the-fly even without prior knowledge of the data's structure or field names

Tips for incorporating an onClick event into a variable beyond the class extension

Executing a simulated onClick event in jQuery

Floating division element above responsive divisions

Sinon Stub generates varying values with each invocation

Disregard earlier callback outcome if there has been a change in the state since then

Problem with bcrypt npm installation on Mac OS X 10.9 and Node v0.10.22

"Combining Angular and jQuery for powerful web development

Verification of Radiobox Groups in AngularJS

Prevent a specific folder from being included in expressjs routing

Retrieve anchor elements from multiple HTML documents

Successfully resolving the API without encountering any response errors, even after sending a response

Tips for retrieving javascript-generated HTML content

Timeout for jQuery animations

Developing with node and express: optimizing your workflow

In Vue using Typescript, how would I go about defining a local data property that utilizes a prop as its initial value?

Mastering the map() function in Vue.js 2

Trigger an event when hovering over a disabled item in React using material-ui's tooltip feature

The command "json_encode($array)" does not seem to be encoding the complete array

Can you extract information from the XML file and modify the anchor tags?