技術ブログ

(技術系中心)基本自分用備忘録なので、あくまで参考程度でお願いします。

Vuexの基本

Vuexの基本

Vue.jsのコンポーネントが複数になると、コンポーネント間のデータの受け渡しが複雑になってきます。

その結果、データがどこで変更されたか等のデータの流れが追いづらくなり、メンテナンスが困難なコードとなってしまいました。

このような問題を解決するために生まれたのがVuexになります。

Vuexではコンポーネントが共有するデータの状態をグローバルに管理するという発想になります。 f:id:lhiroki1205:20200609174021p:plain 画像参考: Vue.js/Vuexを使ってTrello風アプリを作成しよう!

Vuexの使い所

注意点 - 複数のコンポーネントからVuexでデータ管理するのは便利な反面、状態管理が甘いとデータの統一が取れなくなってカオスな状態になるので注意が必要。

sotreについて

Vuexの中心となるのがstoreと呼ばれるアプリケーションのデータの状態を保持するコンテナになります。

state

アプリケーション全体のデータの状態を管理する。

mutations

stateの更新だけを行う。(メソッドみたいなもの)

actions

mutationsの呼び出しを行う

getters

tateの値を算出したものを返す場合に役立つ(算出プロパティみたいなもの)

f:id:lhiroki1205:20200609174725p:plain 画像参考: Vue.js/Vuexを使ってTrello風アプリを作成しよう!

参考サイト

参考: Vue.js/Vuexを使ってTrello風アプリを作成しよう!