【NuxtJS】 Vuexのモジュールモードで localStorage に保存する方法 | subscribe を利用
やりたいこと
Nuxt.js
で Vuex
のモジュールモードを利用して localStorage
値を保存しようと思っています。今回の場合には、VuexのAPIの一つである
subscribe `を利用しました。
環境
- Node.js v12.13.0
- Nuxt 2.13.0
コード
storeフォルダに、index.js
, todos.js
を作成します。その後に、pagesフォルダのindex.vue
を修正します。
ディレクトリ
必要なファイル群です。treeコマンドで表示を行いました。必要だけれども表示すると膨大になる、node_modules
, .nuxt
, .git
は非表示にしています。
~/d/example-nuxt (master|…) $ tree -a -L 2 -I 'node_modules|.nuxt|.git' . ├── .editorconfig ├── .gitignore ├── README.md ├── layouts │ └── default.vue ├── nuxt.config.js ├── package-lock.json ├── package.json ├── pages │ └── index.vue └── store ├── index.js └── todos.js
store/index.js
storeにlocalStoragePlugin
というプラグインを追記します。また、plugins
を追加します。pluginsは、配列である必要があるのでplugins = [ localStoragePlugin ]
のように右辺を配列にします。
const localStoragePlugin = store => { store.subscribe((mutation, { todos }) => { window.localStorage.setItem('todos', JSON.stringify(todos)) }) } export const plugins = [ localStoragePlugin ]
store/todos.js
こちらは、subscribeするときに実行されるmutationを定義しておき、storeである必要があるため、stateも忘れずに用意しておきます。
export const state = () => ({ todos: {} }) export const mutations = { setTodo (state, { content }) { state.todos = content } }
pages/index.vue
storeのtodos.jsを利用できるようにします。そのために、今回はmapMutations
を利用しました。mountedにて、setTodo()
関数が実行されるとtodosのmutationが反応します。そして、localStorageにtodos
のstate
がプラグインによりローカルストレージに保存されます。
<template> <p>open the Application in Developer tool</p> </template> <script> import { mapMutations } from 'vuex' export default { methods: { ...mapMutations({ setTodo: 'todos/setTodo' }) }, mounted () { this.setTodo({ content: 'hoge' }) } } </script>
実行
コードが完成したので実行してみます。ブラウザのローカルストレージに値が保存されているか確かめてみます。
ブラウザを開いて開発者ツールからApplicationを選択します。Storageのプルダウンから現在のurlを選択することでlocalStorageを見ることができるようになります。
正しく保存されている場合は、下図のようにtodosのhogeが存在していることが分かります。
参考
- API リファレンス | Vuex, 入手先 https://vuex.vuejs.org/ja/api/#subscribe
- 作者:MIO
- 発売日: 2018/05/29
- メディア: Kindle版