Vuexの基本
Vuexの基本
Vue.jsのコンポーネントが複数になると、コンポーネント間のデータの受け渡しが複雑になってきます。
その結果、データがどこで変更されたか等のデータの流れが追いづらくなり、メンテナンスが困難なコードとなってしまいました。
このような問題を解決するために生まれたのがVuexになります。
Vuexではコンポーネントが共有するデータの状態をグローバルに管理するという発想になります。 画像参考: Vue.js/Vuexを使ってTrello風アプリを作成しよう!
Vuexの使い所
- 複数のコンポーネントでデータを共有したい場合
注意点 - 複数のコンポーネントからVuexでデータ管理するのは便利な反面、状態管理が甘いとデータの統一が取れなくなってカオスな状態になるので注意が必要。
sotreについて
Vuexの中心となるのがstoreと呼ばれるアプリケーションのデータの状態を保持するコンテナになります。
state
アプリケーション全体のデータの状態を管理する。
mutations
stateの更新だけを行う。(メソッドみたいなもの)
actions
mutationsの呼び出しを行う
getters
tateの値を算出したものを返す場合に役立つ(算出プロパティみたいなもの)
画像参考: Vue.js/Vuexを使ってTrello風アプリを作成しよう!