Persisting data

[rayoplateado]

Hi, I was spending some time trying to decide which vue i18n project to choose, when I've found this one. I think it's by far the easiest approach.

I was wondering if there is a way to make data persistent in localstorage. I've been using vuex-localstorage for my modules and works pretty well. Some of the info in my app needs to be persistent. Also current language.

Is there a way to solve that?

Thank you for your fantastic job!

[tikiatua]

Hi there,

Thank you for your feedback. The vuex-i18n plugin basically does intentionally not specify where the localization information should come from. You may specify it directly in the code (as in the example in the readme), load it via an ajax-request or – as you intend – fetch it from local storage.

Basically you just need to load the data from local storage (use json.stringify to put your whole localization object into the storage and json.parse to retrieve the whole object from local storage).

Afterwards you can use Vue.i18n.add(locale, translations) or $i18n.add(locale, translations) inside a component to add the locale information. The $i18n.set(locale) method will allow you to set the current locale (which could also be saved in the local storage and be retrieved again from there).

Please let me know, if you need any more help to get it working.

[rayoplateado]

Hi again! And thank you for your answer!

The point is, I have GET http queries to get the info from a json file. To get info is not the problem. I have vuex-i18n working perfectly, and it was pretty easy. The point is that I want to save this i18n state into local storage. For other states i'm using vuex-localstorage, which works like a charm.

That's the point. 1 GET petition, then save to local storage, and avoid to lose the info when the user reloads...

Because editing node_modules/vuex-i18n is not an option I guess...

[tikiatua]

Ah ok.. I understand your idea.

Please keep in mind, that doing this could cause problems, if you decide to update your locale information at a point in the future ;-) - also known as the caching problem.

So I would suggest this workflow:

• Prevent the user interface from rendering until all locale data is available - i.e. using v-if or something similar
• Check in the local storage if the locale information is provided - i.e localStorage.getItem('locale')
• Check if the translations for this locale are available - i.e. localStorage.getItem('translations-en')
• Download the translations from the server if locale or translation is not available
• Store the translation and locale in the local storage - i.e. localStorage.setItem('locale')
• Hand the locale to the vuex-i18n plugin Vue.i18n.add(locale, translations)
• Set the current locale with Vue.i18n.set(locale)
• Render the user interface

[rayoplateado]

Yeah, i was thinking about why there is no localstorage in vuex. Maybe this "caching problem" is the answer for my question...

Thank you for this workflow, I think I'm going to re-focus the way i'm working with localstorage.

Cheers!

[nerdoza]

For anyone looking to persist the locale easily using vuex-persistedstate, it's actually fairly trivial to do.

First, you'll want to either whitelist paths for persistence or use the reducer function to remove paths that shouldn't be persisted (the i18n.tranlsations object should not be persisted). You'll want to make sure the i18n.locale object is going to be persisted however. For my particular instance, that looked like this:

const store = new Vuex.Store({
  modules: {
    settings,
    i18n: VuexI18n.store
  },
  plugins: [createPersistedState({ paths: ['settings', 'i18n.locale'] })],
  strict: true
})

Vue.use(VuexI18n.plugin, store)

Then, wherever you initialize your i18n plugin, simply check for the existence of a locale prior to calling set locale so that you don't overwrite the persisted data.

export default function () {
  Vue.i18n.add('en', en)
  Vue.i18n.add('fr', fr)

  if (!Vue.i18n.locale()) {
    Vue.i18n.set('en')
  }
}

[tikiatua]

Hi @bayssmekanique,

Thank you for posting these instructions. Very helpful