Comments (6)
Hi @bayssmekanique,
Thank you for posting these instructions. Very helpful
from vuex-i18n.
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.
from vuex-i18n.
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...
from vuex-i18n.
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
from vuex-i18n.
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!
from vuex-i18n.
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')
}
}
from vuex-i18n.
Related Issues (20)
- Support for yarn HOT 1
- What is the current version? HOT 3
- The v1.10.7 introduced a couple of breaking changes: Comparison vs v1.10.5 HOT 5
- Not able to access i18 plugin from mutation in classic mode store in Nuxt application HOT 1
- Usage of special characters inside the translations ( ) HOT 2
- Testing the fallback language - Chai HOT 2
- Single File Component Children not updating HOT 3
- Hook custom logic for non existent keys in lang HOT 2
- nuxt example implementation HOT 2
- Improve typescript declarations HOT 3
- Improve plugin documentation
- Multiple modules HOT 2
- What about provide plugin for debugging content HOT 1
- Using square brackets in identifier does not work HOT 2
- Linked local messages HOT 1
- Set Fallback language File HOT 5
- How to translate a component attribute/property
- Unicode-Support?
- support change language key before render ?
- Option to suppress the `i18n: Not all placeholders found` console warnings HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vuex-i18n.