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

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

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

Vuexをインストール

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

npm install vuex --save

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

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

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

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)　//Vuexを使えるように宣言

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

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

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

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

import Vue from 'vue'
import App from './App.vue'

new Vue({
  render: h => h(App),
}).$mount('#app')

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

import Vue from 'vue'
import App from './App.vue'
import store from './store'

new Vue({
  store,
  render: h => h(App),
}).$mount('#app')

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