vue.js
Vuex

Vuexについてまとめてみた

Vuexについて


目次

  • vuexとは
  • メリット デメリット

vuexとは


  • Vuex は Vue.js アプリケーションのための 状態管理パターン + ライブラリです。 これは予測可能な方法によってのみ状態の変異を行うというルールを保証し、アプリケーション内の全てのコンポーネントのための集中型のストアとして機能します。

  • コンポーネント外にデータを管理する場所(ファイル)を作ることによって共通のデータを複数のコンポーネントから呼び出せるようにする

vuexの流れ


  • dispatch
    • コンポーネント側からvuexのactionを動かす
  • action
    • commitを呼び出したり、非同期の処理を行う事ができる
  • commit
    • コンポーネント側から直接mutationを呼び出す
    • store内でも呼び出す事ができる
  • mutation
    • stateの状態を変更する
  • 単一方向データフロー
    • 必ずcommit → mutation しないと状態を変えられない

今まで


Vuex


メリット

今までは都度propとemitを繰り返していたがvuexを使うと

this.$store.state.key

でどのコンポーネントからでも呼び出せるのでデータが扱いやすくなった

  • データがcommitによってしか変えられないのでエラーが起きた際にわかりやすい

デメリット

  • commitが何をしてるかを追うのがちょっとめんどくさい
    • でも以前のprop emitを追うよりはいい

まとめ

  • データがどのコンポーネントからでもアクセスできるので追加で何か動きや機能をつけたい時は実装しやすいと思いました