Vue.jsの続きです。前回まではNuxt.jsのプロジェクトを見ていきました。今回からは状態管理ライブラリ「Vuex」に取り組んでみます。まず「状態管理」とはなんぞや、何の状態を管理するのか？というところからいろいろ調べてみました。それではいきましょう！
Qiitaアドベントカレンダー（Vue #2）9日目の記事です。
※参考：Vue #2 Advent Calendar 2019 - Qiita
【目次】
- Vuexとは何か
- Vuexを使わないデータのやり取り（propsと$emit）
- Vuexの源流（Redux、Flux 、The Elm Architecture）
- ストア＝データを保持するコンテナ
- Vuexのインストール方法
- 最後に
※参考：前回記事
【Vue.js】$route.paramsと$route.queryでパスやGETパラメータから動的にページを作る - クモのようにコツコツと
※参考：Vue.jsの習得のためにやったことまとめ
qiita.com
Vuexとは何か
公式サイトによると
Vuex は Vue.js アプリケーションのための 状態管理パターン + ライブラリです。 これは予測可能な方法によってのみ状態の変異を行うというルールを保証し、アプリケーション内の全てのコンポーネントのための集中型のストアとして機能します。
うーむ、いまいちピンとこない解説。
何かの状態を管理できそうなことはわかる。その後「予測可能な方法によってのみ状態の変異を行うというルールを保証」とか「アプリケーション内の全てのコンポーネントのための集中型のストアとして機能」とか、まるごとよくわからない。。
この中で固有っぽい単語は「ストア」。お店、ではないよねコレ。しかしそれ以外の一般的な単語で書かれている部分もいまいちイメージが湧かない。
もう少し噛み砕いた解説をしてくれている記事がありました！
ここでいう状態とは、アプリケーションが保持するデータのことです。Vuexを使うことでそれらのデータを一元管理することができます。しかも、それらのデータは全てのコンポーネントから参照することができる
※参考：Vuexとは。まずはこれを読んでVuexの概要を理解しよう。｜たのしいWeb開発
なるほど。複数のコンポーネントを跨いで同じデータを参照したい場合に使うわけか！わかりやすい。
Vuexを使わないデータのやり取り（propsと$emit）
先ほどの記事の続き
もしpropsや$emitを使っていてデータの受け渡しが複雑になってしまっている場合は、Vuexの導入を検討してみるといいかもしれません。
※参考：Vuexとは。まずはこれを読んでVuexの概要を理解しよう。｜たのしいWeb開発
propsについては以前、コンポーネントの記事でも触れた。コンポーネントに値を渡す設定をするオプション
※参考：【Vue.js】コンポーネントにpropsオプションで値を渡す - クモのようにコツコツと
$emitはコンポーネント間でデータを渡すメソッドのようだ。
「コンポーネント間のデータのやり取り」では「親から子」にdataを伝達する手段「props」、そして「子から親」にdataを伝達する手段「emit」が存在します。
※参考：【Vue.js】【図解】emit、propsを使ったコンポーネント間のデータのやり取り | orizuru
コンポーネントの親子関係で親から子はprops、子から親はemitと対な関係になっている。
こちらの記事の図もわかりやすかった！
今までは都度propとemitを繰り返していたがvuexを使うと
どのコンポーネントからでも呼び出せるのでデータが扱いやすくなった
Vuexの源流（Redux、Flux 、The Elm Architecture）
Vuexの元となったアイデア
再び公式サイト。下の方にこのような記述がある。
Vuex の背景にある基本的なアイディア
Flux、 Redux そして The Elm Architectureから影響を受けています。
これらがVuexの背景となったアイデアのようだ。FluxとReduxは名前も似ている。
Fluxとは
こちらの記事によると
Fluxって？
Facebookが提唱しているアーキテクチャで、JavaScriptのデータの流れを分かりやすく整理するために使われます。
JavaScriptはイベントドリブンなため、様々なデータの流れがあり複雑化しやすくなっています。
そのためFluxではその流れを一方向にまとめよう！といったことをやっています。
※参考：結局FluxやらReduxやらって何なのか個人的なまとめ - Qiita
ふむふむ。JSのイベント部分とデータの流れを分離して管理しようと。Facebook製なのね。
Reduxとは
同じ記事のReduxの解説。
んじゃReduxって？
ReduxはFluxの派生ですが、Fluxとの違いは色々とあります。
Reduxには三原則があったり、FluxにあったDispatcherがReduxにはありません。
また、stateオブジェクトに対し直接変更を加える事はせず、新しいstateオブジェクトを作成する方法をとっています。
※参考：結局FluxやらReduxやらって何なのか個人的なまとめ - Qiita
Fluxとは少し違いがあるようだが、基本的なコンセプトは同じと。
先にFluxやReduxを経験している方にとってはVuexは入りやすいんだろうな。「あー、この機能はReduxでいうアレか」「この機能はReduxと違うんだな」とか比較対象になるので。
The Elm Architectureとは
3つ目の「The Elm Architecture」とはなんだろう。公式サイトによると
The Elm Architecture は、ウェブアプリケーションを構築するためのシンプルなパターンです。モジュール性やコードの再利用性、テストのしやすさなどに優れています。つまり、複雑なアプリケーションを作るときでも、安心してリファクタリングしたり機能を追加できるようにしてくれるのです。
※参考：The Elm Architecture · An Introduction to Elm
うーむ、いまいち抽象的でよくわからない。Flux、Redux、Vuexよりももっと広いアプリ開発全般の概念な気がする。。
ストア＝データを保持するコンテナ
Vuexを理解する上でおそらく大事な概念と思われる「ストア」について。（冒頭に書いた公式サイト解説上の固有な単語）
公式サイトの別ページにはこう解説されている。
※参考：Vuex 入門 | Vuex
Vuex アプリケーションの中心にあるものはストアです。"ストア" は、基本的にアプリケーションの 状態（state） を保持するコンテナです。
うむ。これまで読んできた記事を理解した上で見ると、この文章も理解できる。アプリケーション内でコンポーネントを跨いで管理したいデータがこのストアというコンテナに保持されているわけだ。
これを踏まえて最初の解説を読み直すと…
Vuex は Vue.js アプリケーションのための 状態管理パターン + ライブラリです。 これは予測可能な方法によってのみ状態の変異を行うというルールを保証し、アプリケーション内の全てのコンポーネントのための集中型のストアとして機能します。
いくらか読みにくさは残るものの一番最初に読んだときよりはイメージしやすくなった。
予測可能な（シンプルな）方法で、状態（データ）の変異（受け渡し）を行うことができ、アプリケーションの全コンポーネントに対する集中型の（一元化した）ストアとして機能する。
みたいな感じかな。ふ〜、やっとわかった。
Vuexのインストール方法
Vuexをインストール方法。公式サイトによると
jsファイルをリンク（Promiseも必要）
※参考：インストール | Vuex
jsファイルのリンクだけでも使えるみたい！
<script src="/path/to/vue.js"></script> <script src="/path/to/vuex.js"></script>
その下にPromiseについての記述もある。
Vuex は Promise (プロミス) を必要とします。
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>
CDNでリンクしている。
「Promise」は非同期処理を簡潔に記述できるAPI。コールバック地獄（入れ子）ではなくチェーン状に記述できる。
以前の記事で触れた「axios」もPromise ベース
※参考：【Vue.js】axiosでJSONファイルを読み込む（酒が飲めるぞ！編） - クモのようにコツコツと
CDNからjsファイルをリンク
VuexはCDNのリンクもあった！
※参考：【Vuex】CDNでVuexの最初の一歩を踏み出す - Qiita
<!-- Vue.js(開発バージョン) --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- Vuex --> <script src="https://unpkg.com/vuex"></script> <!-- Vuexを使うときはPromiseも必要 --> <script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>
npmでインストール
npmでインストールする場合は、ターミナルで下記のコマンドを打つ。
npm install vuex --save
Promiseも入れる場合は下記のコマンド
npm install es6-promise --save # NPM
※参考：インストール | Vuex
Vue CLIは組み込み項目として選択可能
Vue CLIを導入する場合、以前の記事にも書いたように、インストール時に組み込み項目の選択でVuexも一緒に選べる。
※参考：【Vue.js】Vue CLIのプロトタイプとプロジェクトを作る - クモのようにコツコツと
この中から選べる
* Babel * TypeScript * Progressive Web App (PWA) Support * Router * Vuex * CSS Pre-processors * Linter / Formatter * Unit Testing * E2E Testing
Nuxtは最初から組み込まれている
以前の記事でも書いたように、Nuxt.jsをインストールしている場合は、Vuexは最初から基本構成として組み込まれている
Nuxt.jsは下記のもので構成されている。
- Vue 2
- Vue Router
- Vuex（ストアオプションを利用している場合に限る）
- Vue Server Renderer（mode: 'spa' を利用している場合を除く）
- vue-meta
※参考：【Vue.js】Nuxt.jsで何ができるのか調べた（SSR、ルーティング、静的ファイル生成など） - クモのようにコツコツと
最後に
ということで、今回はVuexの概要を理解するためにいろいろ調べてみました。なんとなくイメージは湧いてきた。次回は実際にVuexを体験してみたく。Nuxt.jsには最初からVuexが組み込まれているので、そこの上で何か書いてみます。それではまた！
※参考：Vue.jsの習得のためにやったことまとめ
qiita.com