公開日: 2020年11月01日

【Vue.js】Vuexの使い方を解説【データ保存】

Vue.jsを使っていると、 「コンポーネントを超えてグローバルなデータ保存をしたい！」 というシーンがしばしば出てきます。

今回はそんな悩みを解消してくれる 『Vuex(ビューエックス)』 について解説します。

Vuexとは？
Vuexのインストール方法
Vuexの使い方
ストアの作成
ストアの参照
データの変更
まとめ

Vuexとは？

VuexとはVue.jsのためのデータ保存ツールです。

すべてのコンポーネントからアクセスでき、さらに意図しないデータの変更を防げます。

例えば、ログイン中のユーザーに関するデータはどのコンポーネントからも参照できたほうが便利ですよね。

Vuexはデータを1箇所に集中させて管理を容易にします。

“Vuex は Vue.js アプリケーションのための状態管理パターン + ライブラリです。

これは予測可能な方法によってのみ状態の変異を行うというルールを保証し、アプリケーション内の全ての> コンポーネントのための集中型のストアとして機能します。

また Vue 公式の開発ツール拡張と連携し、設定なしでタイムトラベルデバッグやステートのスナップショットのエクスポートやインポートのような高度な機能を提供します。”

公式より引用

Vuexのインストール方法

では、実際にインストールをしてみましょう。以下のコマンドでローカルにインストールできます。

グローバルにインストールする場合は、--saveの代わりに-gオプションをつけましょう。

NPM以外のインストール方法は公式ドキュメントから確認できます。

npm install --save vuex

Vuexの使い方

では、実際にVuexを使ってみましょう。

ストアの作成

ストアとは、データを保持しておく場所です。今回は、store.jsという名前のファイルを作成します。

store.js

import Vue from ‘vue’
import Vuex from ‘vuex’

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    animal: dog
  }
}

これで、”animal”というデータはどこからでも参照できるようになりました。

ストアの参照

では、どのように参照するか解説します。

例えば、components/Animal.vueというファイルから”animal”を参照する場合は以下のように作成できます。

components/Animal.vue

<template>
  <div>{{ animal }}</div>
</template>

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

store.jsのstateで定義した”animal”は、”this.$store.state.animal”によってどのコンポーネントからも参照可能です。

また、computedに書くことによって”animal”の変更を検知できます。

データの変更

次に、データの変更方法を解説します。

Vuexでは、意図しない値の変更を防ぐために以下のように値を直接変更できません。

// 変更できない例
this.$store.state.animal = cat

Vuexでは、毎回コミットすることによって値の変更を保存します。

まず、先ほど作成したstore.jsにmutationsプロパティをくわえてください。

store.js

import Vue from ‘vue’
import Vuex from ‘vuex’

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    animal: 0
  },
  mutations: {
    setAnimal (state, animal) {
    state.animal = animal
    }
  }
}

次に、components/Anima.vueにAnimalsの値をcatにする処理を書きます。

components/Animal.vue

<template>
  <div>{{ animal }}</div>
  <button @click=”change()”>変更</button>
</template>

<script>
export default {
  name: 'Animal',
  computed: {
    animal () {
      return this.$state.store.animal
    }
  },
  methods: {
  change () {
  store.commit(‘setAnimal’, ‘cat’)
  }
}
</script>

ストアに保存されているデータを変更するときは、毎回コミットして保存します。流れは以下の通りです。