Not able to access i18 plugin from mutation in classic mode store in Nuxt application

[d0peCode]

I'm trying to implement Vuex i18n package within my Nuxt application. In my nuxt.conf.js file in plugins array I have:

{
    src: '@/plugins/i18n.js',
    ssr: false
},

plugins/i18n.js file is:

import Vue from "vue";
import vuexI18n from "vuex-i18n/dist/vuex-i18n.umd.js";
import toEnglish from "../translations/toEnglish";
import toSpanish from "./../translations/toSpanish";
import toGerman from "./../translations/toGerman";

export default ({ store }) => {
    Vue.use(
        vuexI18n.plugin,
        store,
        {
            onTranslationNotFound: function (locale, key) {
                console.warn(`vuex-i18n :: Key '${key}' not found for locale '${locale}'`)
            }
        }
    );

    // register the locales
    Vue.i18n.add('en', toEnglish);
    Vue.i18n.add('de', toGerman);
    Vue.i18n.add('es', toSpanish);

    // Set the start locale to use
    Vue.i18n.set('de');
    Vue.i18n.fallback('en');
}

Last thing is my store. I'm using classic mode of vuex store in Nuxt:

import Vuex from "vuex";

const store = () => {
    return new Vuex.Store({
        state: () => ({
            currentLanguage: ''
        }),
        mutations: {
            changeLang(state, response) {
                if (response) {
                    console.log(this);
                    state.currentLanguage = response;
                    this.i18n.set(response);
                }
            }
        }
    })
};


export default store;

As you can see in store file in mutation I'm trying to access i18n plugin with this keyword. Unfortunetally in print error in console:

TypeError: Cannot read property 'set' of undefined

this which I consoled also inside mutation is:

Please help me. Thank you in advance.

[tikiatua]

Hi @BorysTyminski,

Thank you for your feedback. First of all, I would recommend to not use the this keyword inside a vuex store but only act on the properties passed into the respective functions.

The vuex-i18n plugin will actually simply register a special vuex module in the i18n namespace (https://vuex.vuejs.org/guide/modules.html).

So to modify the i18n data, you can call the respective actions. In your example, this would be the action 'i18n/setLocale'.

I would also advice you to call the respective i18n action from inside another action and not from inside a mutation.

// dispatch an action for the i18n vuex module
dispatch('i18n/setLocale', currentLanguage, { root: true });

You can find all available actions and mutations inside this file
https://github.com/dkfbasel/vuex-i18n/blob/master/src/vuex-i18n-store.js