Vuexのインストールからストアの設定までの流れ

javascript

Vuexとは、状態管理ライブラリで、いろんなデータを様々なコンポーネントから参照したい事が多々あるかと思うので、そのデータを一元管理するライブラリです。

そのVuexをインストールしてから使えるようにするまでの流れを忘れがちなので忘備録としてメモ。

Vuexをインストール

Vuexのインストールするにあたってはパッケージ管理ツールのnpmを使ってインストールしていきます。
コマンドを立ち上げて、Vuexをインストールするディレクトリまで移動して下記のコマンドを打ち込むとインストールされます。

インストールが終わったら、さっそく使っていきます。

ストアの設定をしてみよう

Vuexでデータを管理するにはストアの設定が必要です。
ストアとはVuexを使う上でアプリケーションの状態(情報)を保持する役割ですが細かい話は下記で詳しく説明しています。

https://qiita.com/kouki-iwahara/items/1a75daaa93657b0b56d7

JavascriptファイルでVuexを使えるようにする

今回はVueのディレクトリの中に「store」というフォルダを作成して、その中にindex.jsというファイルを作成しました。
では、実際に下記のようにVuexを使えるようにしていきます。

vueとvuexをインポートしてVueのuseメソッドにVuexを割り当て宣言しておきます。

全てのコンポーネントからストアにアクセスできるようにするには?

「store」フォルダ内のindex.jsでVuexを使えるように宣言しただけでは、すべてのコンポーネントでストアを使う事はできません。
ルートコンポーネントにstoreオプションを指定してあげる必要があります。

Vueのプロジェクトのsrcフォルダ直下にmain.jsファイルがあります。このファイルから全ての Vue アプリケーションがスタートします。

そして下記のような記述があります。

ここに先ほどのストアをインポートしてVueインスタンスにオプションとして指定してあげると、どこのコンポーネントでもストアが使えるようになります。

以上で、Vuexのインストールとストアの設定の流れです。
Vuexのステートなどを使ってデータの状態を管理するような設定をしていきます。