Pinia store don’t update the i18n when swich language

Pinia store doesn’t update the i18n when switching language

When working with TypeScript and Pinia, you may encounter a situation where the i18n (internationalization) doesn’t update when switching the language in your Pinia store. This can be frustrating, but fortunately, there are a couple of solutions to this problem.

Solution 1: Using a computed property

One way to ensure that the i18n updates when the language is changed is by using a computed property in your Pinia store. By creating a computed property that depends on the current language, you can trigger the i18n update whenever the language changes.

// Pinia store
import { defineStore } from 'pinia';

export const useI18nStore = defineStore('i18n', {
  state: () => ({
    language: 'en',
    translations: {
      en: {
        greeting: 'Hello',
      },
      es: {
        greeting: 'Hola',
      },
    },
  }),
  getters: {
    greeting() {
      return this.translations[this.language].greeting;
    },
  },
  actions: {
    setLanguage(language: string) {
      this.language = language;
    },
  },
  computed: {
    updateI18n() {
      return this.language;
    },
  },
});

In the code snippet above, we have a Pinia store called ‘i18n’ with a computed property ‘updateI18n’ that depends on the ‘language’ state. This computed property will trigger the i18n update whenever the ‘language’ changes.

Solution 2: Using a watcher

Another solution is to use a watcher in your Pinia store. Watchers allow you to perform actions whenever a specific property changes. By watching the ‘language’ property, you can update the i18n accordingly.

// Pinia store
import { defineStore } from 'pinia';

export const useI18nStore = defineStore('i18n', {
  state: () => ({
    language: 'en',
    translations: {
      en: {
        greeting: 'Hello',
      },
      es: {
        greeting: 'Hola',
      },
    },
  }),
  getters: {
    greeting() {
      return this.translations[this.language].greeting;
    },
  },
  actions: {
    setLanguage(language: string) {
      this.language = language;
    },
  },
  watch: {
    language(newLanguage) {
      // Update i18n here
    },
  },
});

In the code snippet above, we have added a watcher to the ‘language’ property. Whenever the ‘language’ changes, the watcher function will be triggered, allowing you to update the i18n accordingly.

Conclusion

Pinia is a powerful state management library for TypeScript, but sometimes you may encounter issues with updating the i18n when switching languages. By using computed properties or watchers in your Pinia store, you can ensure that the i18n updates correctly. Choose the solution that best fits your needs and enjoy seamless language switching in your application!