【JS/Vue】VueXの浅い理解

5403 ワード
Vue.js JavaScript Vuex JavaScript テキストリンク

注意

VueXについては、下記の記事を読むのが一番です。
vuexをまだ理解していない全人類に捧ぐvuexを利用したコードの図解 - Qiita

VueX

VueXの構成

  • Actions
  • Mutations
  • State

以下全体図


Vuex とは何か？ | Vuexより引用

全体の流れ

  1. stateを確認
  2. actionを呼び出し
  3. mutationsへcommit
  4. stateを更新

this.$store.dispatch('xxx') でコンポーネント内でアクションをディスパッチできます。あるいはコンポーネントのメソッドを store.dispatch にマッピングする mapActions ヘルパーを使うこともできます（ルートの store の注入が必要です）:
アクション | Vuexより引用

store

アプリケーションの 状態（state） を保持するコンテナです。
storeの状態を変更する際は、Mutationsにコミットをすることで store を変更することが可能です。

templateから$storeにアクセスすることができます。
$sotre.state

actionの呼びだし方法

dipatch

this.$store.dispatch('メソッド名')

mapActions

methods: {
  ...mapActions(['login'])
}

actionで定義されるcommit

actionの定義をする際、下記のようにmutationsへcommitをします。
その際のcommitが少しとっつきづらいです。

// 実装
actions: {
  toggleSideMenu ({ commit }) {
    commit('toggleSideMenu')
  }
}

// 本当は
actions: {
  toggleSideMenu (context) {
    context.commit('toggleSideMenu')
  }
}

上記で記載の通り、context.commitを呼び出しています。
詳しい解説は下記がわかりやすかったです。
vuexで登場する分割代入の説明 - Qiita
分割代入 - JavaScript | MDN

Flux

VueXは、Fluxがベースになっています。
Fluxを実装したのが、Reduxで、そこからVueXが生まれました。


flux/examples/flux-concepts at master · facebook/flux · GitHubより引用

Fluxとはなんなのか - Qiita

全ての状態を持つべきか

公式ドキュメントでも述べられている通り、全てを置かなくても良いみたいです。

Vuex を使うということは、全ての状態を Vuex の中に置くべき、というわけではありません
ステート | Vuexより引用

参考記事

VueとVuexの間の値の連携の仕方 - Qiita
2018年Vue.jsとVuexを使ってる人には必ず知っていてほしい開発やメンテナンスの際に役立つ設計とTipsとサンプルコード - Qiita