multi projects vuex-i18n

[nunob87]

hello, I have several projects in which they will read the store for other projects, but those outside the project give me immense errors in translation.

in the main project the translation works and has no errors, in the secondary, it does not work

code:

// in a directory of a subproject
store.js

import Vue from 'vue'
import Vuex from 'vuex'
import vuexI18n from 'vuex-i18n'
import en from './../../../atx/src/langs/en/translations.json'
import pt from './../../../atx/src/langs/pt/translations.json'

import { state } from './../../../atx/src/vuex/state.js'
import { getters } from './../../../atx/src/vuex/getters.js'
import { mutations } from './../../../atx/src/vuex/mutations.js'
import { subCategorias, subCategoriasX, fnMobil, moveScroll } from './../../../atx/src/vuex/funcoes.js'

Vue.use(Vuex)

export const store = new Vuex.Store({
  state: Object.assign(state, {
    apiToken: '',
    modalEncomendas: {},
    modalEncomendas1: [],
    'tipos-documento': {},
    'tipos-documento1': false,
    'tipos-documento2': false,
    composicoes: {},
    composicoes1: false,
    composicoes2: false,
    'estados-encomenda': {},
    'estados-encomenda1': false,
    'estados-encomenda2': false,
    menuFlutuanteAR: []
  }),
  getters: Object.assign(getters, {
    TOKEN (state) {
      return state.apiToken
    }
  }),
  mutations: Object.assign(mutations, {
    SET_MENUFLUTUANTE (state, data) {
      state.menuFlutuanteAR = data
    },
    SET_INIT1 (state) {
      state.apiToken = ''
      state.modalEncomendas = {}
      state.modalEncomendas1 = []
      state['tipos-documento'] = {}
      state['tipos-documento1'] = false
      state['tipos-documento2'] = false
      state.composicoes = {}
      state.composicoes1 = false
      state.composicoes2 = false
      state['estados-encomenda'] = {}
      state['estados-encomenda1'] = false
      state['estados-encomenda2'] = false
      state.menuFlutuanteAR = []
    },
    GET_INFO1 (state, campo) {
      if (!state[campo + '1'] && !state[campo + '2']) {
        let url = campo
        let data = {}
        switch (campo) {
          case 'estados-encomenda':
          url = 'https://prod.epicbit.pt/estados'
          break
          case 'composicoes':
          url = 'https://prod.epicbit.pt/composicoes'
          break
        }
        state[campo + '2'] = true
        state.http.get(url, data).then((res) => {
          state[campo] = res.data
          state[campo + '1'] = true
          state[campo] = res.data
        }, (er) => {
          try {
            if (er.response.error === 'token_expired' || er.response.error === 'token_invalid') {
              window.location = 'http://' + window.location.hostname
            } else {
              state.error = true
            }
            state.info1[campo] = false
          } catch (e) {
            console.log(e)
          }
        })
      }
    },
    SET_APITOKEN (state, token) {
      state.apiToken = token
    }
  })
})

Vue.use(vuexI18n.plugin, store)
Vue.i18n.add('en', en)
Vue.i18n.add('pt', pt)
Vue.i18n.set('pt')

// parent project directory
mutations.js

import Vue from 'vue'

export const mutations = {
  SET_LANG (state, lang) {
    Vue.i18n.set(lang)
  },
....

// errors

TypeError: Cannot read property 'set' of undefined
    at Store.SET_LANG (mutations.js?3828:6)
    at wrappedMutationHandler (vuex.esm.js?2f62:697)
    at commitIterator (vuex.esm.js?2f62:389)
    at Array.forEach (<anonymous>)
    at eval (vuex.esm.js?2f62:388)
    at Store._withCommit (vuex.esm.js?2f62:495)
    at Store.commit (vuex.esm.js?2f62:387)
    at Store.boundCommit [as commit] (vuex.esm.js?2f62:335)
    at VueComponent.mappedMutation (vuex.esm.js?15db:831)
    at VueComponent.SET_LANGUAGE (page-login.vue?fe58:64)

[tikiatua]

Hi @nunob87

Thank you for reporting your issue. The problem arises due to the way that the i18n methods are registered on the vue instance.

When you run Vue.use(vuexi18n.plugin, store), the plugin registers several methods on the respective vue instance – i.e. Vue.i18n.set(..) – several methods on the vue component prototype – i.e. this.$t, this.$i18n.set(..) – and a new vuex-module on the store that you passed.

As the vuexi18nPlugin is not registered on the vue instance in the parent project, any call to those methods will fail. Thus the error message 'set' of undefined.

You should be able to alleviate the problem by registering the plugin also on the parent directory.

However, be advised, that the plugin will create a new vuex module on the state that you pass on plugin registration. The vuex-stores in your child projects will thus probably each get their own i18n-vuex-module.

Calling the method Vue.i18n.set(lang) will simply set the respective locale in the respective vuex-module. Thus setting the locale in the parent project will probably not propagate to the children.

[tikiatua]

By the way. You could directly dispatch vuex actions to change the i18n store settings from other vuex modules.

actions: {
  doSomething({dispatch}, payload) {
    let lang = 'pt';
    dispatch('i18n/setLocale', lang, {root:true});
  }
}

// available actions are
i18n/setLocale
i18n/addLocale
i18n/replaceLocale
i18n/removeLocale
i18n/setFallbackLocale

This way you would not need to register the i18n plugin on the parent.