プロローグ
Nuxt.jsを触り始めて三ヶ月弱くらいですが、
色々と使い方を覚えてきたので、メモとして記録を残します。
不備不足だったり、理解が浅くて説明不足なところがあるかと思いますが、
勉強して更新していきたいとは思っています。
この記事で何ができるようになるか
storeを使ってデータを扱うにはこうするんだ〜程度のことがわかるようになるかとは思います。
というのも、まだ１回教えてもらってなんとか使えるようになった程度なので、詰めが甘いところがあるかと思います。
storeとは
storeを使うことで、アプリケーションの状態(state)やデータを保持することができます。
emitやpropを使ってdataを共有することもできますが、ブラウザ上にデータを保持することがストアではできるので、一旦ブラウザを閉じてもstoreに保持したデータは残ります。
使い方
今回はクラシックモードでストアを使うので、Vuex インスタンスを返す関数がエクスポートされている store/index.js ファイルを作ります。
しかし、この機能（クラシックモード）は Nuxt 3 で廃止し、削除される予定です・・。
クラシックモード
この機能は Nuxt 3 で廃止し、削除される予定です。クラシックモードでストアを使うには、Vuex インスタンスを返す関数がエクスポートされている >store/index.js ファイルを作る必要があります。
store/index.jsを解説
保持されたデータを扱うために、下記の４つを使ってデータを扱います。
リンク先はそれぞれのドキュメントに記載されている説明になります。
| 用語 | |
|---|---|
| state | データの情報源（信頼できる唯一の情報源 ） |
| getter | 変更された値を保持する（ゲッターの結果はその依存関係に基づいて計算され、依存関係の一部が変更されたときにのみ再評価される ） |
| mutation | データの情報源を更新する（実際に状態の変更を行う） |
| action | 非同期処理や外部APIとの通信を行い、最終的にmutationを呼び出す為に使われます。（引用：【Vuex】ストアの4つの概念まとめ【唯一の情報源】） |
今回は、state / mutation / actionを解説していきたいと思います（getterはまだ使ったことないので割愛させていただきます）。
今回保持したいデータとして、ブログなどで月別での記事を検索するとします。
下記画像のように、「４月」をクリックしたら「４月」の記事一覧画面へ遷移するとともに、「４月」というデータを保持したい場合を想定します。
「４月」の記事一覧画面へ遷移すると同時に、選択された「４月」というデータを保持する。
store/index.jsでの解説を行っていきます（コメントにて説明）。
export const state = () => ({
selectedDay: null
});
//stateでデータを設定します。月別での記事を検索する前は月は選ばれていないのでnullと設定しました。
export const mutations = {
setSelectedDay(state, selectedDay) {
state.selectedDay = selectedDay
}
}
//setSelectedDay(state, selectedDay) の第1引数で状態（state）を取得します。
//第2引数でselectedDayの値をstate（情報源）に渡します。ここでは例えばselectedDayを４月とします。
//すると、setSelectedDay(state, selectedDay) {}の中身では
//selectedDayがnullだったものを４月とデータを更新していることになります（state.selectedDay = selectedDayがそれ）。
export const actions = {
setSelectedDay({ commit }, selectedDay) {
commit('setSelectedDay', selectedDay)
}
//setSelectedDay({ commit }, selectedDay)の第1引数でmutationsとcommitします。
//Actions は、状態は変更せず、 Mutations を commitし、Mutations を commit することで状態(State)を更新します。：引用（参考記事/[Vue.js] Vuexの使い方を知る）
//commit('setSelectedDay', selectedDay)では、第１引数に呼び出す関数の名前を入れてます。
//第２引数では該当mutationsで使用する値（selectedDay）をいれています。
}
actionsで非同期処理や外部APIとの通信を行い変更されたデータがsetSelectedDayに入ります。
setSelectedDayに入ったデータはmutationsのstate.selectedDay = selectedDayで更新されます。
更新されたデータはstateのselectedDayに保持されてるというながれになります。
actions（データ受け取り） -> mutations（データ更新） -> state（データ保持）
という流れになります。
pages/index.vueを解説
保持されたデータを使いたいときは下記のように書きます。
こうすることで、保持されたデータがdayに入ったので、使い回すことができます。
const day = this.$store.state.selectedDay
stateのデータを更新したいときは下記のように書きます。
('setSelectedDate', "５月")の第１引数はactionsで定義した関数の名前です。
第２引数は更新したい値をいれます。
this.$store.dispatch('setSelectedDate', "５月")
//または
this.$store.dispatch('setSelectedDate', this.lastDay)
//dataで定めた値を入れてもいい
おまけ
説明してきたように、vueでstoreの状態を呼び出したり（this.$store.state.selectedDay）、更新させたり（this.$store.dispatch('setSelectedDate', this.lastDay)）することができます。
そのときに便利なヘルパーがあるのでそちらの記事を引用して終わりにします。
・【Vuex】mapState, mapGetters, mapMutations, mapActionsの最低限の使い方まとめ
参考記事
・Vuexとは。まずはこれを読んでVuexの概要を理解しよう。
・Nuxt.jsをはじめよう - Vuexを使ってデータを渡す
・Vue.js、Nuxt.jsでのVuex(store)の使いドコロ
・Nuxt.js で Vuex を使う
・【Vuex】ストアの4つの概念まとめ【唯一の情報源】
・[Vue.js] Vuexの使い方を知る
一言
数週間前にやったものですが、１度書いてみただけだったので、記事を書くにあたって調べ直したり、理解が浅すぎるところがありました・・。何回も何回も同じ状態に遭遇して、やらないと覚えきれないなと痛感しました。
なので、再度不備不足や間違っているところがないのかを勉強し直して更新していきます。