JavaScript

Vuexのインストール~ストア作成までの手順を解説|Vuex

質問者
質問者
Vuexのインストール方法とストアの作成方法を教えてください。

分かりました。早速進めていきましょう!

Vuexをインストールしてみよう

Vuexのインストールには下記の方法があります。

  • scriptタグで直接読み込む方法
  • npm、Yarnを利用する方法

scriptタグで直接読み込む方法

Vueを読み込んだ後にvuexを読み込むだけで完了です。

npm、Yarnを利用する方法

vuexをインストールが完了したら、下記のようにVuexを明示的に導入します。

質問者
質問者
インストール方法が2つありますが、どちらを選べばいいのでしょうか。

Vuexを使うということは比較的大きなアプリケーションということが想定されますので、npmまたはYarnを使うのが一般的かと思います。しかし、プログラミングの練習や簡単なアプリケーションを作る場合はscriptタグで直接読み込むという選択肢もあります。

ストアを作成してみよう

Vuexを読み込んだら、ストアを作成しましょう。ストアはアプリケーションの状態を管理する役割を担い、Vuexの根幹となります。

scriptタグでVuexを直接読み込んだ場合

#1でVuex.Storeインスタンスを作成します。

npm、Yarnを利用した場合

#1でVuex.Storeインスタンスを作成します。

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

下記のようにルートコンポーネントにstoreオプションを指定すると、すべての子コンポーネントからstoreにアクセスできるようになります。どこからでもアクセスできるのがストアのメリットの1つですので、ルートコンポーネントにstoreオプションを指定するのは基本の設定と覚えておくといいです。

筆者
筆者
以上、Vuexのインストール方法とストアの作成方法でした。ひきつづきVuexについて知りたい方はこちらの記事をどうぞ!