can't access i18n translation inside vuex state.js file

[ssuess]

And if I try to use const i18n = require('src/boot/i18n') instead of import, console.log(i18n) gives me:

Module {__esModule: true, Symbol(Symbol.toStringTag): "Module", default: ƒ}
default: ƒ (_ref)
arguments: [Exception: TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them at Function.invokeGetter (<anonymous>:1:142)]
caller: [Exception: TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them at Function.invokeGetter (<anonymous>:1:142)]
length: 1
name: ""
prototype:
constructor: ƒ (_ref)
__proto__: Object
__proto__: ƒ ()
[[FunctionLocation]]: i18n.js?8847:6
[[Scopes]]: Scopes[3]
i18n: (...)
Symbol(Symbol.toStringTag): "Module"
__esModule: true
get i18n: ƒ ()
__proto__: Object

[ssuess]

Aren’t the boot files supposed to be loaded before anything else? It feels like i18n is not being loaded in time and that is why it comes back undefined?

[metalsadman]

@ssuess your import seems to be wrong, should be with curly braces import { i18n } from 'src/boot/i18n'.

[ssuess]

This post is deleted!

[ssuess]

@metalsadman Thanks, I already tried it both ways, made no difference alas.

[tof06]

I think the problem is that the store is initialized before boot files, which is quite logical since boot files can access the store.

So, a solution may be to defer translations. You may use a getter for that, with a map on your menu array that will replace fields by their translation.

[metalsadman]

Hmm you arr using this in your state. Remove thatt as well.

[ssuess]

@metalsadman definitely not that, see above for all the variations I have tried.

[ssuess]

@tof06 this sounds logical to me, do you have any example code you could point me to? Where exactly would this code go? in the state.js file or somewhere else?

[mas]

I imported i18n in vuex modules where I need it this way:

import { i18n } from 'src/boot/i18n'

and then accessed i18n translations in my vuex actions this way:

let myMessage = i18n.t('messages.myMessage')

Works like magic.

[Musulmon]

You should import i18n as like

import {i18n} from '../boot/i18n'

because i18n is not default exported.