ymmooot

Nuxt.js の多言語対応サイトにて、ユーザーが違うロケールにアクセスした際に localStorage をクリアする

ロケールを切り替えた時に localStorage の内容を全て消したい

nuxt.config.ts{
  plugins: [
    { src: '~/plugins/vuex-persistedstate.ts', mode: 'client' }
  ]
}

vuex-persistedstate.tsimport { Context, Plugin } from '@nuxt/types';
import createPersistedState from 'vuex-persistedstate'
import { extractLocale } from '@/libs/locale';

const clearStorageIfNeeded = (path: string): void => {
  const lastLocale = localStorage.getItem('locale')
  const newLocale = extractLocale(path)

  if (!lastLocale || lastLocale !== newLocale) {
    localStorage.clear()
    localStorage.setItem('locale', newLocale)
  }
}

const plugin: Plugin = ({ store, route }: Context) => {
  window.onNuxtReady(() => {
    // Clear storage if locale is different from last time
    clearStorageIfNeeded(route.path)

    createPersistedState({
      key: 'foo',
      paths: [
        'hogehoge',
        'fugafuga',
      ],
    })(store)
  })
}

export default plugin

このプラグインを導入してるサイトでは、SPA 遷移でロケールを切り替えられないので onNuxtReady で行なっているが、通常の switchLocalePath を利用している場合は beforeLanguageSwitch などでクリアするべきだろう。


参照:

Share on