vuexの理解

これまでVuexが散々わからなくて感で書いてたのですが、ようやく大枠が理解できるようになりました。

自分のメモの意味でまとめます。

Vuexとは

vue.jsで使うデータの状態を管理をするためのライブラリでnuxt.jsにも標準で入っています。

設計的にはFluxというものの影響を受けています。
Fluxはデータフローを管理する考え方で、一方向にデータを向けるといった考え方です。

データが単一の方向に制限できるので、管理の複雑さを軽減するためバグ、不具合が起きたときも検証がしやすいです。

Vuexはaction => Mutation => State => Vue Component (View) という、単一方向のデータフローになります。

Storeについて

Vuexで自分が主に使うのはstoreです(というか他に何があるのかもよくわかっていません)

Storeはデータを管理するコンテナ(箱)的な役割で、複数のコンポーネントを跨いで参照するときに複雑なデータの受け渡しをせずにStoreで一元管理するといったメリットがあります。

Storeの中では4つの機能(データの方向)が有ります

  • Action(アクション)
  • Mutation(ミューテーション)
  • State(ステート)
  • Getter(ゲッター)

Action

関数を作成して、Mutationに登録された関数をcommitで持ってくる。
Mutationと違い非同期の処理を持ってこれるので、apiなどのデータを持ってくる系はここで実装する

使用するときは...mapActionsを使う

Mutation

stateを更新できる唯一の場所。
Mutationの関数は直接呼び出す事ができない。
store.commit()とかで呼び出します

State

データの状態を管理する箱。
vueの中でのdata的な役割をしている。

Getter

Getterはstateのデータを参照して加工する場所。

複数の場所でfilter処理されたデータを使いたい場合に、コンポーネント側にfilter処理があると、それぞれのコンポーネントでfilterの実装を書く必要でるのでそれを共通化する目的。

使用するときは...mapGettersを使う

この記事を書いた人

conti

大阪で東京の事業会社でフルリモートワークで働いているWebデザイナーです。副業とか好きで週末フリーランスしてます。
コードを書くのが得意なのでプログラマーに愛されるデザイナーってよく言われます。
プロフィール