コードカキタイ
ツール
Vuexを使うと何ができる？おすすめ書籍とプログラミングスクール

ツール

最終更新日: 2023.12.24 (公開: 2023.11.09)

Vuexを使うと何ができる？おすすめ書籍とプログラミングスクール

VuexはVue.jsのプラグインです。データを保存・管理するためのツールで、すべてのコンポーネントからアクセスできます。本記事では、Vuexの特徴やインストール方法、おすすめの書籍を紹介します。

VuexはVue.jsのプラグインで、データを保存・管理するためのツールとして使われており、すべてのコンポーネントからアクセスできます。本記事では、Vuexの特徴やインストール方法を解説します。

また、学習のレベルにあわせたおすすめの書籍もあわせて紹介するので、WebアプリケーションやWebサイト開発に興味がある方、これからエンジニアを目指す方はぜひ参考にしてください。

Vuexとは？

Vuexは、Vue.jsで使えるプラグインです。データの保存が主な役割となっており、すべてのコンポーネントからアクセスできます。

保存したデータは状態管理（アプリケーションのある時点での状態を制御・追跡・変更すること）できるため、ログイン状態や検索条件の維持などを管理したい場合に活用されることが多いです。

Vuexがない環境の場合、コンポーネント間でデータの受け渡しをするにはpropsや$emitによるイベントを利用しなければなりません。

しかし、データの受け渡しが多くなったり階層が増えたりすると、propsや$emitでのデータ管理は困難となります。

Vuexを活用すれば、Vuexにデータを保存しどのコンポーネントからでもVuex内のデータへアクセスできるため、上記の問題を解決できるのです。

Vue.jsとは

Vue.jsは、「JavaScript」のフレームワークです。UIの構築を得意としており、WebアプリケーションのUIなどを簡単に構築できます。

シンプルな設計ながら拡張性が高く、他のライブラリと組み合わせることで、より効率的な開発が可能です。

「JavaScript」フレームワークの中でもとくに採用率が高く、実際に多くのサービスでVue.jsが使われているため、習得するメリットが大きいスキルといえるでしょう。

Vue.jsはオープンソースで無償公開されており、導入コストがかからない点も魅力です。

Vuexをインストールする方法

Vuexをインストールするには、コマンドプロンプト（MacOSはターミナル）にコマンドを入力する必要があります。npmを利用する場合は、コマンドプロンプトに「npm install -–save vuex」と入力しましょう。

yarnを利用する場合は「yarn add vuex」と入力してください。scriptタグで直接読み込む方法もありますが、上記のようにnpmまたはyarnを利用したインストールが一般的です。

Vuexのsデータの扱い方

Vuexはデータの状態をグローバルに管理することが可能で、データ状態はVuexの「store」に保持しています。

storeを構成している要素は以下の通りです。

state
mutations
actions
getters

それぞれ詳しく解説します。

state

stateはデータの入れ物で、APIからのレスポンスはまずstateに入ることになります。データの状態を保持しており、stateが変更されることで算出プロパティやテンプレートに反映されます。

stateで扱うのは、基本的にグローバルに管理したいデータです。すべてのデータをstateで保持するのではなく、グローバルに管理する必要のないローカルデータはdataオプションで管理するとよいでしょう。

stateの特定のプロパティを参照する際は「store.state.state名」と記述してください。

mutations

stateの値を更新する際に使われるのがmutationsで、mutationsをコミットすることによりstateを更新できます。stateの状態変更を追跡しやすくするといった理由から、原則としてstateの更新はmutationsでのみ可能です。

処理は同期的にしかできませんが、ひとつのmutationが複数状態の変更を一度におこなわないことで、よりシンプルな状態を保てます。

mutationsをコミットする際は、「store.comit(‘mutation名’)」と記述しましょう。

追加の引数を渡す場合は、第二引数として「payload」を使い、「store.comit(‘mutation名’, payload)」と記述します。

actions

actionsは、mutationを呼び出す際に使われます。mutationがstateの更新をおこなうのに対し、actionsは非同期処理や外部APIとの通信などの処理が主な役割です。

actionsを使う際は引数として「context」が使われます。このcontextオブジェクトを通じて、現在のVuexストアの各種メソッドやプロパティにアクセスすることが可能です。たとえばmutationsをコミットする場合は「context.commit(“mutation名”)」、他のactionを実行する際は「context.dispatch(“action名”)」と記述します。

getters

gettersは、Stateのデータを加工してコンポーネントに提供したいときに利用されます。

似た処理は「computed」でも可能ですが、computedはコンポーネント単位で実装するのに対し、gettersはstate単位での実装なため、適切に使い分けることで処理を軽くできます。

store.gettersで参照する際は、「store.getters.getters名」と記述してください。

Vuexの基本的な使い方

次に、Vuexの基本的な使い方を見ていきましょう。Vuexのstoreを使ってデータの状態を管理する手順は以下の通りです。

storeを作成
computedプロパティでアクセス
オブジェクトデータの表示
データの更新

それぞれ詳しく解説します。

storeを作成

Vuexを実際に使用するにあたって、まずはデータを保持するためのstoreを作成しましょう。

storeを作成するサンプルコードは、以下の通りです。

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    sample: 'initial data' // これはサンプルの初期データです
  },
  mutations: {
    // ここにmutationsを追加します
  },
  actions: {
    // ここにactionsを追加します
  },
  getters: {
    // ここにgettersを追加します
  }
})

このように記述することで、「sample」というデータにすべてのコンポーネントからアクセスできます。

computedプロパティでアクセス

次に、computedプロパティを用いてsampleにアクセスしてみましょう。

実際のコード例は、以下の通りです。

<template>
  <div>{{ sample }}</div>
</template>

<script>
export default {
  name: 'Sample',
  computed: {
    sample() {
      return this.$store.state.sample
    }
  }
}
</script>

このように記述することで、「this.$store.state.sample」によってどのコンポーネントからでもsampleにアクセスできます。

また、computedプロパティを利用することでsampleの変更を検知し、それに反応してUIを自動的に更新することが可能です。

オブジェクトデータの表示

次に、Vuexを利用してオブジェクトデータを表示してみましょう。

まずは表示したいオブジェクトをstate内に作成します。

state: {
    animals: [‘いぬ’, ‘ねこ’, ‘さる’]
    }

次に、「v-for」を用いてanimalsを表示します。

<template>
  <ul>
    <li v-for="(animal, index) in animals" :key="index">
      {{ animal }}
    </li>
  </ul>
</template>

<script>
export default {
  computed: {
    animals() {
      return this.$store.state.animals
    }
  }
}
</script>

データの更新

最後に、state内のデータを更新してみましょう。今回はボタンを押すと値が1ずつ増えていくようにします。

データを更新するために、mutationsを定義しましょう。サンプルコードは、以下の通りです。

export default new Vuex.Store({
  state: {
    number:  0
  },
  mutations: {
    increment: function (state) {
      state.number++;
    }
  }
})

次に、ボタンを表示させ、クリックイベントを設定します。

<template>
    <div id=”count”>
      <p><button v-on:click=”increment”>CountUP</button></p>
        <h1>Number:{{ number }}</h1>
    </div>
</template>

<script>
    export default {
        name: ‘count’,
        methods: {
            increment: function () {
                this.$store.commit(‘increment’)
            }
        }
        computed: {
            number: function () {
                return this.$store.state.number
            }
        }
    }
</script>

このように記述することで、ブラウザ上にCountUPボタンとnumberが表示され、ボタンを押すと値がひとつずつ増えます。