From 3ea3d4d4a539a1e60588d807a0be8990c7342892 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rafa=C5=82=20Ch=C5=82odnicki?= <rchl2k@gmail.com>
Date: Mon, 8 Mar 2021 22:35:45 +0100
Subject: [PATCH] feat(vuex): expose nuxt-i18n API on store (#1098)

The '$i18n' was already there but not `localePath` and other "root" APIs.

Resolves #1031
---
 docs/content/en/api.md             |  7 +++++++
 docs/content/es/api.md             |  7 +++++++
 src/templates/plugin.routing.js    | 10 +++++-----
 test/fixture/basic/pages/about.vue |  1 +
 test/fixture/basic/store/index.js  | 26 ++++++++++++++++++++++++++
 test/module.test.js                | 20 ++++++++++++++++++++
 types/vue.d.ts                     |  7 ++++++-
 7 files changed, 72 insertions(+), 6 deletions(-)

diff --git a/docs/content/en/api.md b/docs/content/en/api.md
index 03c472ed4..2cc284d5c 100644
--- a/docs/content/en/api.md
+++ b/docs/content/en/api.md
@@ -231,3 +231,10 @@ export const actions = {
   }
 }
 ````
+
+### getRouteBaseName
+### localePath
+### localeRoute
+### switchLocalePath
+
+See [documentation](#methods).
diff --git a/docs/content/es/api.md b/docs/content/es/api.md
index 83f45b98f..9b3f275b0 100644
--- a/docs/content/es/api.md
+++ b/docs/content/es/api.md
@@ -231,3 +231,10 @@ export const actions = {
   }
 }
 ````
+
+### getRouteBaseName
+### localePath
+### localeRoute
+### switchLocalePath
+
+See [documentation](#methods).
diff --git a/src/templates/plugin.routing.js b/src/templates/plugin.routing.js
index d7ca697f0..b37ae6dd1 100644
--- a/src/templates/plugin.routing.js
+++ b/src/templates/plugin.routing.js
@@ -209,9 +209,9 @@ const plugin = {
 
 export default (context) => {
   Vue.use(plugin)
-  const { app } = context
-  app.localePath = NuxtContextProxy(context, localePath)
-  app.localeRoute = NuxtContextProxy(context, localeRoute)
-  app.switchLocalePath = NuxtContextProxy(context, switchLocalePath)
-  app.getRouteBaseName = NuxtContextProxy(context, getRouteBaseName)
+  const { app, store = {} } = context
+  app.localePath = store.localePath = NuxtContextProxy(context, localePath)
+  app.localeRoute = store.localeRoute = NuxtContextProxy(context, localeRoute)
+  app.switchLocalePath = store.switchLocalePath = NuxtContextProxy(context, switchLocalePath)
+  app.getRouteBaseName = store.getRouteBaseName = NuxtContextProxy(context, getRouteBaseName)
 }
diff --git a/test/fixture/basic/pages/about.vue b/test/fixture/basic/pages/about.vue
index 7cd376310..3d73374fc 100644
--- a/test/fixture/basic/pages/about.vue
+++ b/test/fixture/basic/pages/about.vue
@@ -3,6 +3,7 @@
     <LangSwitcher />
     <div id="current-page">page: {{ $t('about') }}</div>
     <nuxt-link id="link-home" exact :to="localePath('index')">{{ $t('home') }}</nuxt-link>
+    <div id="store-path-fr">{{ $store.state.routePathFr }}</div>
   </div>
 </template>
 
diff --git a/test/fixture/basic/store/index.js b/test/fixture/basic/store/index.js
index e69de29bb..abd3416f7 100644
--- a/test/fixture/basic/store/index.js
+++ b/test/fixture/basic/store/index.js
@@ -0,0 +1,26 @@
+/**
+ * @typedef {{
+ *   routePathFr: string
+ * }} State
+ *
+ * @typedef {import('vuex').Store<State>} TestStore
+ */
+
+/** @return {TestStore['state']} */
+export const state = () => ({
+  routePathFr: ''
+})
+
+/** @type {import('vuex').MutationTree<State>} */
+export const mutations = {
+  setInitialRoutePath (state, path) {
+    state.routePathFr = path
+  }
+}
+
+/** @type {import('vuex').ActionTree<State, State>} */
+export const actions = {
+  nuxtServerInit ({ commit }) {
+    commit('setInitialRoutePath', this.switchLocalePath('fr'))
+  }
+}
diff --git a/test/module.test.js b/test/module.test.js
index 6b663b7b8..2508767d8 100644
--- a/test/module.test.js
+++ b/test/module.test.js
@@ -2111,3 +2111,23 @@ describe('Composition API', () => {
     expect(dom.querySelector('#processed-url')?.getAttribute('href')).toBe('/')
   })
 })
+
+describe('Store', () => {
+  /** @type {Nuxt} */
+  let nuxt
+
+  beforeAll(async () => {
+    nuxt = (await setup(loadConfig(__dirname, 'basic'))).nuxt
+  })
+
+  afterAll(async () => {
+    await nuxt.close()
+  })
+
+  test('API is available in store instance', async () => {
+    const html = await get('/about-us')
+    const dom = getDom(html)
+
+    expect(dom.querySelector('#store-path-fr')?.textContent).toBe('/fr/a-propos')
+  })
+})
diff --git a/types/vue.d.ts b/types/vue.d.ts
index 8ffb36977..295cae09c 100644
--- a/types/vue.d.ts
+++ b/types/vue.d.ts
@@ -1,4 +1,5 @@
-import Vue from 'vue'
+import 'vue'
+import 'vuex'
 import { Location, RawLocation, Route } from 'vue-router'
 import VueI18n, { IVueI18n } from 'vue-i18n'
 import { MetaInfo } from 'vue-meta'
@@ -63,5 +64,9 @@ declare module '@nuxt/types' {
 declare module 'vuex/types/index' {
   interface Store<S> {
     readonly $i18n: VueI18n & IVueI18n
+    getRouteBaseName(route?: Route): string
+    localePath(route: RawLocation, locale?: string): string
+    localeRoute(route: RawLocation, locale?: string): Location | undefined
+    switchLocalePath(locale: string): string
   }
 }