feat: Inject $i18n into Vuex Store as this.$i18n

nuxt-modules · Sep 18, 2019 · bb31cb0 · bb31cb0
1 parent d91e89f
commit bb31cb0
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 3 deletions.
diff --git a/docs/api/README.md b/docs/api/README.md
@@ -64,7 +64,7 @@ In `no_prefix` strategy, passing `locale` other than the current one is not supp
 ## Extension of VueI18n
 
 ::: tip
-Instance of [VueI18n class](http://kazupon.github.io/vue-i18n/api/#vuei18n-class) (see its [properties and methods](http://kazupon.github.io/vue-i18n/api/#properties)) is exposed as `$i18n` on Vue instance and as `i18n` on Nuxt `context.app`.
+Instance of [VueI18n class](http://kazupon.github.io/vue-i18n/api/#vuei18n-class) (see its [properties and methods](http://kazupon.github.io/vue-i18n/api/#properties)) is exposed as `$i18n` on Vue instance and Vuex Store but as `i18n` on Nuxt `context.app`.
 :::
 
 ### Methods
@@ -137,7 +137,7 @@ Instance of [VueI18n class](http://kazupon.github.io/vue-i18n/api/#vuei18n-class
 
 ### context.app.i18n
 
-  - **Type**: `VueI18n`
+  - **Type**: [`VueI18n`](#extension-of-vuei18n)
 
 See also [Nuxt context](https://nuxtjs.org/api/context#the-context).
 
@@ -156,3 +156,21 @@ export default Vue.extend({
   }
 })
 ````
+
+## Extension of Vuex
+
+### $i18n
+
+  - **Type**: [`VueI18n`](#extension-of-vuei18n)
+
+Can be accessed in store's actions and mutations as `this.$i18n`.
+
+Example use:
+
+```js
+export const actions = {
+  nuxtServerInit({ commit }) {
+    commit('LOCALE', this.$i18n.locale)
+  }
+}
+````
diff --git a/src/plugins/main.js b/src/plugins/main.js
@@ -22,6 +22,7 @@ import { getLocaleDomain, getLocaleFromRoute, syncVuex, validateRouteParams } fr
 
 Vue.use(VueI18n)
 
+/** @type {import('@nuxt/types').Plugin} */
 export default async (context) => {
   const { app, route, store, req, res, redirect } = context
 
@@ -188,6 +189,9 @@ export default async (context) => {
   // Inject seo function
   Vue.prototype.$nuxtI18nSeo = nuxtI18nSeo
 
+  // Inject in store.
+  store.$i18n = app.i18n
+
   if (store && store.state.localeDomains) {
     app.i18n.locales.forEach(locale => {
       locale.domain = store.state.localeDomains[locale.code]

diff --git a/types/nuxt-i18n.d.ts b/types/nuxt-i18n.d.ts
@@ -67,7 +67,7 @@ declare namespace NuxtVueI18n {
       seo?: boolean
       strategy?: 'no_prefix' | 'prefix_except_default' | 'prefix' | 'prefix_and_default'
       vueI18n?: VueI18n.I18nOptions
-      vuex?: VuexInterface
+      vuex?: VuexInterface | false
     }
   }
 }

diff --git a/types/test/index.ts b/types/test/index.ts
@@ -1,4 +1,5 @@
 import Vue from 'vue'
+import Vuex from 'vuex'
 import * as types from '../index'
 
 const vm = new Vue()
@@ -26,3 +27,9 @@ const routeBaseName: string = vm.getRouteBaseName(vm.$route)
 const cookieLocale: string | undefined = vm.$i18n.getLocaleCookie()
 vm.$i18n.setLocaleCookie(locale)
 vm.$i18n.setLocale(locale)
+
+// Store
+
+const store = new Vuex.Store({})
+
+store.$i18n.setLocale(locale)
diff --git a/types/vue.d.ts b/types/vue.d.ts
@@ -45,3 +45,9 @@ declare module '@nuxt/types' {
     readonly i18n: VueI18n & IVueI18n
   }
 }
+
+declare module 'vuex/types/index' {
+  interface Store<S> {
+    readonly $i18n: VueI18n & IVueI18n
+  }
+}