refactor!: remove vuex syncLocale & vuex syncMessages (#1240)

docs/content/en/migrating.md

@@ -21,6 +21,8 @@ Follow this guide to upgrade from one major version to the other.
 
 ### `addDirAttribute` default value has been changed from `true` to `false`. Use `$nuxtI18nHead({ addDirAttribute: true })` to set it `true`.
 
+### Vuex `syncLocale` and `syncMessages` properties has been removed. Use `this.$i18n` context instead.
+
 ## Upgrading from 5.x to 6.x
 
 ### Global SEO features are now disabled by default

docs/content/en/options-reference.md

@@ -224,15 +224,13 @@ If `parsePages` option is disabled, the module will look for custom routes in th
 
 ## `vuex`
 
-- type: `object`
-- default: `{ moduleName: 'i18n', syncLocale: false, syncMessages: false, syncRouteParams: true }`
+- type: `object` or `false`
+- default: `{ moduleName: 'i18n', syncRouteParams: true }`
 
 Registers a store module used for syncing app's i18n state. Set to `false` to disable.
 
 Properties:
 - `moduleName` (default: `'i18n'`) - The module's namespace.
-- `syncLocale` (default: `false`) - If enabled, current app's locale is synced with **nuxt-i18n** store module.
-- `syncMessages` (default: `false`) - If enabled, current translation messages are synced with **nuxt-i18n** store module. **This will make the page response bigger so don't use unless necessary.**
 - `syncRouteParams` (default: `true`) - Enables a `setRouteParams` mutation for using custom route names with dynamic routes. See more information in [Dynamic route parameters](/lang-switcher#dynamic-route-parameters)
 
 ## `vueI18n`

src/helpers/constants.js

@@ -56,8 +56,6 @@ export const DEFAULT_OPTIONS = {
   baseUrl: '',
   vuex: {
     moduleName: 'i18n',
-    syncLocale: false,
-    syncMessages: false,
     syncRouteParams: true
   },
   parsePages: true,

src/templates/plugin.main.js

@@ -11,7 +11,7 @@ import {
   parseAcceptLanguage,
   setLocaleCookie
 } from './utils-common'
-import { loadLanguageAsync, resolveBaseUrl, registerStore, syncVuex } from './plugin.utils'
+import { loadLanguageAsync, resolveBaseUrl, registerStore } from './plugin.utils'
 // @ts-ignore
 import { joinURL } from '~i18n-ufo'
 // @ts-ignore
@@ -136,10 +136,6 @@ export default async (context) => {
       Vue.set(app.i18n.localeProperties, key, klona(value))
     }
 
-    if (options.vuex) {
-      await syncVuex(store, newLocale, app.i18n.getLocaleMessage(newLocale), options.vuex)
-    }
-
     // Must retrieve from context as it might have changed since plugin initialization.
     const { route } = context
     const redirectPath = getRedirectPathForLocale(route, newLocale)
@@ -379,10 +375,7 @@ export default async (context) => {
   let finalLocale = options.detectBrowserLanguage ? doDetectBrowserLanguage(route) : ''
 
   if (!finalLocale) {
-    const { vuex } = options
-    if (vuex && vuex.syncLocale && store && store.state[vuex.moduleName].locale !== '') {
-      finalLocale = store.state[vuex.moduleName].locale
-    } else if (app.i18n.differentDomains) {
+    if (app.i18n.differentDomains) {
       const domainLocale = getLocaleDomain(options.normalizedLocales, req)
       finalLocale = domainLocale
     } else if (options.strategy !== Constants.STRATEGIES.NO_PREFIX) {

src/templates/plugin.utils.js

@@ -133,25 +133,9 @@ export function registerStore (store, vuex, localeCodes) {
   const storeModule = {
     namespaced: true,
     state: () => ({
-      ...(vuex.syncLocale ? { locale: '' } : {}),
-      ...(vuex.syncMessages ? { messages: {} } : {}),
       ...(vuex.syncRouteParams ? { routeParams: {} } : {})
     }),
     actions: {
-      ...(vuex.syncLocale
-        ? {
-            setLocale ({ commit }, locale) {
-              commit('setLocale', locale)
-            }
-          }
-        : {}),
-      ...(vuex.syncMessages
-        ? {
-            setMessages ({ commit }, messages) {
-              commit('setMessages', messages)
-            }
-          }
-        : {}),
       ...(vuex.syncRouteParams
         ? {
             setRouteParams ({ commit }, params) {
@@ -164,20 +148,6 @@ export function registerStore (store, vuex, localeCodes) {
         : {})
     },
     mutations: {
-      ...(vuex.syncLocale
-        ? {
-            setLocale (state, locale) {
-              state.locale = locale
-            }
-          }
-        : {}),
-      ...(vuex.syncMessages
-        ? {
-            setMessages (state, messages) {
-              state.messages = messages
-            }
-          }
-        : {}),
       ...(vuex.syncRouteParams
         ? {
             setRouteParams (state, params) {
@@ -201,26 +171,6 @@ export function registerStore (store, vuex, localeCodes) {
   store.registerModule(vuex.moduleName, storeModule, { preserveState: !!store.state[vuex.moduleName] })
 }
 
-/**
- * Dispatch store module actions to keep it in sync with app's locale data
- *
- * @param  {import('vuex').Store<void>} store
- * @param  {string | null} locale The current locale
- * @param  {object | null} messages Current messages
- * @param  {ResolvedOptions['vuex']} vuex
- * @return {Promise<void>}
- */
-export async function syncVuex (store, locale = null, messages = null, vuex) {
-  if (vuex && store) {
-    if (locale !== null && vuex.syncLocale) {
-      await store.dispatch(vuex.moduleName + '/setLocale', locale)
-    }
-    if (messages !== null && vuex.syncMessages) {
-      await store.dispatch(vuex.moduleName + '/setMessages', messages)
-    }
-  }
-}
-
 /**
  * Validate setRouteParams action's payload
  *

test/browser.test.js

@@ -93,7 +93,6 @@ describe(browserString, () => {
     testData = await getTestData()
     expect(testData.languageSwitchedListeners).toEqual([
       {
-        storeLocale: 'fr',
         newLocale: 'fr',
         oldLocale: 'en'
       }
@@ -113,7 +112,6 @@ describe(browserString, () => {
     testData = await getTestData()
     expect(testData.languageSwitchedListeners).toEqual([
       {
-        storeLocale: 'fr',
         newLocale: 'fr',
         oldLocale: 'en'
       }

test/fixture/base.config.js

@@ -48,10 +48,6 @@ const config = {
         }
       },
       fallbackLocale: 'en'
-    },
-    vuex: {
-      syncLocale: true,
-      syncMessages: true
     }
   }
 }

test/fixture/basic/plugins/i18n-hooks.js

@@ -1,5 +1,5 @@
 /** @type {import('@nuxt/types').Plugin} */
-export default ({ app, store }) => {
+export default ({ app }) => {
   app.i18n.onLanguageSwitched = (oldLocale, newLocale) => {
     if (!window.testData) {
       window.testData = {
@@ -8,7 +8,6 @@ export default ({ app, store }) => {
     }
 
     window.testData.languageSwitchedListeners.push({
-      storeLocale: store.state.i18n.locale,
       newLocale,
       oldLocale
     })

test/module.test.js

@@ -510,17 +510,6 @@ for (const trailingSlash of TRAILING_SLASHES) {
         const window = await nuxt.renderAndGetWindow(url('/'))
         expect(window.$nuxt.$store.$i18n).toBeDefined()
       })
-
-      test('syncs i18n locale and messages', async () => {
-        const window = await nuxt.renderAndGetWindow(url('/'))
-        expect(window.$nuxt.$store.state.i18n).toBeDefined()
-        expect(window.$nuxt.$store.state.i18n.locale).toBe('en')
-        expect(window.$nuxt.$store.state.i18n.messages).toEqual(expect.objectContaining({
-          about: 'About us',
-          home: 'Homepage',
-          posts: 'Posts'
-        }))
-      })
     })
 
     // TODO: Broken in Nuxt +2.14.0

types/index.d.ts

@@ -33,8 +33,6 @@ export interface RootRedirectOptions {
 
 export interface VuexOptions {
   moduleName?: string
-  syncLocale?: boolean
-  syncMessages?: boolean
   syncRouteParams?: boolean
 }