nuxt.jsのvuexのモジュールモードでlocalStorageに保存する

やりたいこと

nuxt.jsでvuexのモジュールモードでlocalStorageに保存したい。

メモ

  • vuexのstore.subscribeを使う
  • モジュールモードの場合、store/index.jsにpluginを入れる

環境

  • nuxt.js
  • vuex
    • モジュールモード
  • ブラウザのlocalStorageを使う

ディレクト

  • store/
    • index.js
    • todos.js
  • pages/
    • index.vue

store/index.js

const localStoragePlugin = store => {
  store.subscribe((mutation, { todos }) => {
    window.localStorage.setItem('todos', JSON.stringify(todos))
  })
}

export const plugins = [ localStoragePlugin ]

store/todos.js

export const state = () => ({
  todos: {}
})

export const mutations = {
  setTodo (state, { content }) {
    state.todos = content
  }
}

pages/index.vue

<script>
export default {
  mounted () {
    this.$store.commit('todos/setTodo', { content: 'hoge' })
  }
}
</script>