Nuxt.jsにて、Vuexを利用する際にstore/index.jsはデフォルトで設定されております。
基本的にはこちらのindex.jsにVuexの処理を記述していくことになります。が、index.js以外のファイルに分割して管理したいケースが発生すると思います。
今回は、Nuxt.js において store/index.js以外のファイルにアクセスする方法を解説します。
前提
今回はstoreの記述方法は解説しません。index.js以外に記述するとしても、index.jsへの記述方法と同様です。
todo.jsがstore配下に存在し、こちらにアクセスしていく方法を考えています。
store L index.js L todos.js
Q. stateの場合
this.$store.state.{ファイル名}.{state名}
例：
this.$store.state.todos.list
Q. mutationsの場合
this.$store.commit(“{ファイル名}/{mutations名}”)
例：
this.$store.commit('todos/add', e.target.value)
Q. actionsの場合
this.$store.dispatch(“{ファイル名}/{actions名}”)
例：
this.$store.dispatch('todos/addList')
Q. gettersの場合
下記、記事にまとめております。