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


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

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

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

目次
  1. Vuexとは?
  2. Vuexのインストール方法
  3. Vuexの使い方
  4. ストアの作成
  5. ストアの参照
  6. データの変更
  7. まとめ

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>

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

  • 変更ボタンを押すとmethodsの”change”ファンクションが実行される
  • 第1引数のsetAnimalが実行され、store.jsのmutationsのsetAnimalの第2引数に’cat’が渡される
  • state.animalがcatになる

これでデータの変更が完了しました。

Webサイト担当者としてのスキルが身に付く

CodeCampの無料体験はこちら

まとめ

今回はVuexの使い方について解説しました。

より詳しく知りたい!という方は是非公式ドキュメントを確認してみてくださいね。


関連記事

りもた
この記事を書いた人
りもた
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp