AJAX loaded translations not triggered state to re-render components about vuex-i18n HOT 7 CLOSED

Hi @volodalexey,

This is an interesting question and definitely a use case that we should support somehow. I will look into this tomorrow and see if I can find a solution.

from vuex-i18n.

Hi there,

Sorry for taking this long time to respond, I got quite swamped at work. We will try to take another look at the problem next week.

from vuex-i18n.

Hi!
Thanks for reply.
For anyone who wants a quick temporary solution:

        if (!$i18n.exists(locale)) {
          $i18n.set(undefined); // TODO
          $store.dispatch(actions.dic.FETCH_LOCALE, locale)
            .then((translations) => {
              $i18n.add(locale, translations);
              $i18n.set(locale);
            });
        } else {
          $i18n.set(locale);
        }

from vuex-i18n.

I've managed to get component to be updated on store change. I've overrided ADD_LOCALE mutation to use Vue.set()

// Export store
export default {
    namespaced: false,
    ...VuexI18n.store,
    mutations: {
        ...VuexI18n.store.mutations,
        ADD_LOCALE(state, payload) {
            Vue.set(state.translations, payload.locale, payload.translations);
        },
    },
};

and that's all.

from vuex-i18n.

Marvelous, I already thought that something like that should work but just did not get around to try it out. I will adapt the code accordingly.

from vuex-i18n.

Ok. This was actually a little bit more difficult. We did not want to use Vue.set in the module, to avoid having to load the Vue module explicitly.

However we managed to trigger the observer on the translations by calling state.translations.__ob__.dep.notify(); after updating the store. This seems to do the trick as well. We also added a respective "test case" to the testing page.

Version 1.3.5 - available now - should fix the issue

from vuex-i18n.

@tikiatua Great that you have found better way. I was sure there is one, but since Vue was already loaded in my code Vue.set was the fastest&easiest to use.
Thanks for the update.

from vuex-i18n.