質問者
Vuexのインストール方法とストアの作成方法を教えてください。
分かりました。早速進めていきましょう！
スポンサードサーチ
Vuexをインストールしてみよう
Vuexのインストールには下記の方法があります。
- scriptタグで直接読み込む方法
- npm、Yarnを利用する方法
scriptタグで直接読み込む方法
Vueを読み込んだ後にvuexを読み込むだけで完了です。
1 2 | <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="https://unpkg.com/vuex@3.1.1/dist/vuex.js"></script> |
npm、Yarnを利用する方法
1 2 | $ npm install vuex --save // npmを利用する方法 $ yarn add vuex // Yarnを利用する場合 |
vuexをインストールが完了したら、下記のようにVuexを明示的に導入します。
1 2 3 4 | import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) |
質問者
インストール方法が2つありますが、どちらを選べばいいのでしょうか。
Vuexを使うということは比較的大きなアプリケーションということが想定されますので、npmまたはYarnを使うのが一般的かと思います。しかし、プログラミングの練習や簡単なアプリケーションを作る場合はscriptタグで直接読み込むという選択肢もあります。
ストアを作成してみよう
Vuexを読み込んだら、ストアを作成しましょう。ストアはアプリケーションの状態を管理する役割を担い、Vuexの根幹となります。
scriptタグでVuexを直接読み込んだ場合
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Vuexの練習</title> </head> <body> <h1>Vuexの練習</h1> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="https://unpkg.com/vuex@3.1.1/dist/vuex.js"></script> <script> // ストアの定義 #1 const store = new Vuex.Store({ }) </script> </body> </html> |
#1でVuex.Storeインスタンスを作成します。
npm、Yarnを利用した場合
1 2 3 4 5 6 7 8 | import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) // ストアの定義 #1 const store = new Vuex.Store({ }) |
#1でVuex.Storeインスタンスを作成します。
全てのコンポーネントからストアにアクセスできるようにする
下記のようにルートコンポーネントにstoreオプションを指定すると、すべての子コンポーネントからstoreにアクセスできるようになります。どこからでもアクセスできるのがストアのメリットの1つですので、ルートコンポーネントにstoreオプションを指定するのは基本の設定と覚えておくといいです。
1 2 3 4 | const vm = new Vue({ el: '#app', store // ストアを利用できるようにする #2 }) |
筆者
以上、Vuexのインストール方法とストアの作成方法でした。ひきつづきVuexについて知りたい方はこちらの記事をどうぞ！
スポンサードサーチ
スポンサードサーチ
