Vuexとは

[yuyuyuriko78]

Vuexとは

• 超簡潔にいうと「ルールに基づき安全に変化するグローバル変数」
  • 状態管理の方法のパターンを提供するライブラリ
  • グローバルデータの中央一元管理をするためのライブラリ
• グローバル変数
  • プログラムのどこからでも参照することができる変数
• 状態管理パターン
  • State：状態、データ。変数
  • View：状態を表示する。ユーザが入力。テンプレート
  • Actions：状態を変更する。メソッド

Vueとの関係

• Vuexは、Vueから利用されるという関係にある。
• Vuexは、Vue以外から利用されることはない。
• ただし、VuexがVue以外の何か（jsモジュールなど）を利用することはありうる。

---

参考

• Vuexで何をするか、何をしないか
• Vuexはなるべく避ける
• Vuexって何？
• Vuexを利用したコードの図解
• 同期処理、非同期処理、並列処理のざっくりとした違い

[Atsuhiko]

早速ありがとうございます！

[yuyuyuriko78]

グローバル変数変更のルール

• 単方向データフロー：アプリケーションの状態を一方方向で変更
• 信頼できる唯一の情報源として、グローバル変数stateを保持共有する。
• 「Action, Mutationでグローバル変数stateを変更し、gettersでグローバル変数stateを参照する」

① Dispachする

• ユーザーのアクションによって、Vue componentにおいてVuexで定義したActionを呼び出す。

② APIと非同期処理

• 非同期処理：複数のタスクを実行する際、あるタスクの処理が停止している間に別のタスクの処理を進める手法。
• APIにリクエストを送り、サーバーサイドで定義したロジックに基づき何らかの処理が実行され、その結果がレスポンスで返ってくる。

③ Commitする

• サーバーサイドから返された結果をMutationへ送る。

④ Mutateする（同期処理）

• Mutationがグローバル変数stateを変更する。
• 同期処理：書いた順番に実行される。重たい処理が間にあると、そこで大きな待ち時間が生まれてしまう

⑤ Renderする

• Mutate（変更）されたグローバル変数stateを、Vue Component側に描画する

⑥

[yuyuyuriko78]

Vueにどう書く

Vue.js

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

Vue.use(Vuex)