Vuexについて

Vuex

VuexはVue側でデータ管理を行う拡張ライブラリです。Vueのみで、データ管理を行うとデータの受け渡しが面倒になります。(コンポーネントの親子間でデータの受け渡しを行わないといけなくなります。)
Vuexを使用すると、Vue側でのデータ管理をDBを扱うようにできます。
Vuexのライブラリは、npm installを行うことでインストールすることができます。

状態管理

Vuexでデータ管理を行うと、コンポーネント間でデータの共有ができます。Vuexのデータは常に同期されているので、どこかのコンポーネントでVuexのデータが更新されたら、別のコンポーネントのデータを使用している箇所の表示が変わります。

データ管理の流れ
【コンポーネントA】←→【Vuexのデータ管理】←→【コンポーネントB】

ストア

Vuexのデータ管理は、ストアというものを作成して行います。
ストアの中のデータを更新したり、取り出したりして、データを扱っていきます。ストアには以下の概念があります。

【4つの概念】

• state データを保持する場所(DBのカラムのようなもの)

• getter stateから取り出されたデータ(getterでデータを取得する)

• mutation stateを更新する唯一の処理

• action 外部のAPIを呼び出して、データを取得する処理

ひとこと

Vuexの概要について書きました。次回は、Vuexを使って簡単なコードを書いていきたいと思います。