Nuxtでローカルストレージにアクセス

まずはvuex-persistedstateをインストールします。

npm install --save vuex-persistedstate

nuxt.config.jsのpluginsを修正します。

  plugins: [
    { src: '~/plugins/localStorage.js', ssr: false }
  ],

pluginsフォルダにlocalStorage.jsを作製して以下を記述

import createPersistedState from 'vuex-persistedstate'

export default ({store}) => {
  window.onNuxtReady(() => {
    createPersistedState({
        paths: ['list']
    })(store)
  })
}

pathsのところにstore名を入れます。今回はlistなのでlistですね。
これで動かない時はnuxt.config.jsのmodeをspaにしてください

mode: 'spa',

簡単にstoreの情報を保存できちゃいます。

コメント

タイトルとURLをコピーしました