tomatoaiu の Tech Blog

プログラミングやツールについてのまとめブログ

【NuxtJS】 Vuexのモジュールモードで localStorage に保存する方法 | subscribe を利用

やりたいこと

Nuxt.jsVuex のモジュールモードを利用して 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にtodosstateがプラグインによりローカルストレージに保存されます。

<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が存在していることが分かります。

localStorage
localStorage

参考

基礎から学ぶ Vue.js

基礎から学ぶ Vue.js

  • 作者:MIO
  • 発売日: 2018/05/29
  • メディア: Kindle版