Move i18n to new store

src/boot/after_store.js

@@ -1,4 +1,5 @@
 import { createApp } from 'vue'
+import { createPinia } from 'pinia'
 import { createRouter, createWebHistory } from 'vue-router'
 import vClickOutside from 'click-outside-vue3'
 import VueVirtualScroller from 'vue-virtual-scroller'
@@ -17,6 +18,8 @@ import { CURRENT_VERSION } from '../services/theme_data/theme_data.service.js'
 import { applyTheme, applyConfig } from '../services/style_setter/style_setter.js'
 import FaviconService from '../services/favicon_service/favicon_service.js'
 
+import { useI18nStore } from '../stores/i18n'
+
 let staticInitialResults = null
 
 const parsedInitialResults = () => {
@@ -395,6 +398,11 @@ const afterStoreSetup = async ({ store, i18n }) => {
   })
 
   const app = createApp(App)
+  const pinia = createPinia()
+
+  app.use(pinia)
+
+  useI18nStore().setI18n(i18n)
 
   app.use(router)
   app.use(store)

src/main.js

@@ -67,11 +67,6 @@ const persistedStateOptions = {
   }
   const store = createStore({
     modules: {
-      i18n: {
-        getters: {
-          i18n: () => i18n.global
-        }
-      },
       interface: interfaceModule,
       instance: instanceModule,
       // TODO refactor users/statuses modules, they depend on each other
@@ -99,6 +94,7 @@ const persistedStateOptions = {
     strict: false // Socket modifies itself, let's ignore this for now.
     // strict: process.env.NODE_ENV !== 'production'
   })
+
   if (storageError) {
     store.dispatch('pushGlobalNotice', { messageKey: 'errors.storage_unavailable', level: 'error' })
   }

src/modules/config.js

@@ -2,6 +2,7 @@ import Cookies from 'js-cookie'
 import { setPreset, applyTheme, applyConfig } from '../services/style_setter/style_setter.js'
 import messages from '../i18n/messages'
 import localeService from '../services/locale/locale.service.js'
+import { useI18nStore } from '../stores/i18n.js'
 
 const BACKEND_LANGUAGE_COOKIE_NAME = 'userLanguage'
 
@@ -194,7 +195,7 @@ const config = {
           applyTheme(value)
           break
         case 'interfaceLanguage':
-          messages.setLanguage(this.getters.i18n, value)
+          messages.setLanguage(useI18nStore().i18n, value)
           dispatch('loadUnicodeEmojiData', value)
           Cookies.set(
             BACKEND_LANGUAGE_COOKIE_NAME,

src/services/notification_utils/notification_utils.js

@@ -1,6 +1,7 @@
 import { filter, sortBy, includes } from 'lodash'
 import { muteWordHits } from '../status_parser/status_parser.js'
 import { showDesktopNotification } from '../desktop_notification_utils/desktop_notification_utils.js'
+import { useI18nStore } from '../../stores/i18n.js'
 
 export const notificationsFromStore = store => store.state.statuses.notifications.data
 
@@ -59,7 +60,7 @@ export const maybeShowNotification = (store, notification) => {
   if (!visibleTypes(store).includes(notification.type)) return
   if (notification.type === 'mention' && isMutedNotification(store, notification)) return
 
-  const notificationObject = prepareNotificationObject(notification, store.rootGetters.i18n)
+  const notificationObject = prepareNotificationObject(notification, useI18nStore().i18n)
   showDesktopNotification(rootState, notificationObject)
 }
 

src/stores/i18n.js

@@ -0,0 +1,14 @@
+import { defineStore } from 'pinia'
+
+export const useI18nStore = defineStore('i18n', {
+  state: () => ({
+    i18n: null
+  }),
+  actions: {
+    setI18n (newI18n) {
+      this.$patch({
+        i18n: newI18n.global
+      })
+    }
+  }
+})