JavaScript

Vuexとは。まずはこれを読んでVuexの概要を理解しよう。

課題を持った人
課題を持った人
Vuexって何ですか?Vuexってどんな時に使うといいですか?

このような質問に答えていきます。

Vuexって何?

Vuexとは、Vue.jsアプリケーション用の状態管理ライブラリです。僕はビューエックスと読んでいますが、ビューックスと読む人もいるみたいです。

課題を持った人
課題を持った人
状態管理って何?

ここでいう状態とは、アプリケーションが保持するデータのことです。Vuexを使うことでそれらのデータを一元管理することができます。しかも、それらのデータは全てのコンポーネントから参照することができるため、もしpropsや$emitを使っていてデータの受け渡しが複雑になってしまっている場合は、Vuexの導入を検討してみるといいかもしれません。

Vuexを導入するメリットをまとめると下記のようになります。

  • どのコンポーネントも同一のデータを参照するため、データの不整合が発生しづらい
  • 複数のデータを組み合わせた処理が実装しやすくなる
  • データ変更のログ出力、現在のデータの確認などの開発に便利なツールを作りやすい

Vuexってどんな時に使うといいの?

課題を持った人
課題を持った人
Vuexでデータを管理するメリットは分かりましたが、全てのデータをVuexで管理すればいいのでしょうか?

全てのデータをVuexで管理する必要はありません。データの種類によってVuexで管理するのか、しないのかを判断するといいです。たとえば、コンポーネント内部でしか使用しないデータ(要素の座標情報など)はdataオプションで管理すれば十分です。

まとめると、下記のようになります。

  • アプリケーション全体で使用されるデータ→Vuexで管理する
  • コンポーネントの内部のみで使用されるデータ→dataオプションで管理する
筆者
筆者
ひきつづきVuexについて知りたい方はこちらの記事をどうぞ!