Vuexって何なのかイメージだけざっくりなんとなくつかめてきた

 

こんにちは。

最近になってようやくVuexを使う機会がきました。

ほんとに今更なんですが使う機会がきてVuexが何をしているのか、なんで必要なのかがわかってきました。

現状まだ使い始めたばかりなので詳しいことはわかっていないです。

なのでVuexはこんなものかーというイメージのお話になってしまいます。

Vuexについてざっくり表面だけなんとなくのイメージを掴みたいという方のお力に慣れれば幸いです。具体的な使い方一切触れるつもりは有りません。お恥ずかしながらまだあんまりわかっていないので。

なのでアウトプット。

 

Vuexってなによ

Vue.jsの公式ページより引用

Vuex は Vue.js アプリケーションのための 状態管理パターン + ライブラリです。 これは予測可能な方法によってのみ状態の変異を行うというルールを保証し、アプリケーション内の全てのコンポーネントのための集中型のストアとして機能します。 また Vue 公式の開発ツール拡張と連携し、設定なしでタイムトラベルデバッグやステートのスナップショットのエクスポートやインポートのような高度な機能を提供します。

 

なにやら難しいこと言っております。

Vue.jsのコンポーネントはそれぞれデータを持つことができます。つまり複数のコンポーネントがあったら色々なデータがあちらこちらに散らばっているわけです。
更にコンポーネントの親子間でデータを渡したり受け取ったりするので開発時にその流れを把握することは結構しんどいです。

その散らばったデータをVuexで管理してデータを一つにしようみたいなイメージです。

 

Vuexは何ができるのよ

1. 当然のことながらデータを持つことができる。そのデータはどのコンポーネントからでも参照することができます。

なのでコンポーネントでデータを描画したいときはVuexで管理されているデータを参照すればいいだけなので描画したいデータはどこにあるんだろう〜〜みたいな悩みを持つことはない。

 

2. Vuexのデータの更新の方法は一つしかない

っていうルールがある。

Vuexのデータを更新するときはmutationというものを使わなければならない。これ以外の方法は無いらしい。データの更新を追跡するときはmutationを調べればいいので、なんかデータ更新されてるけどどこや!!とかバグってるけどどこにあんねん!!とかは絶対にならない。ものすごくデバッグしやすい。

 

おおきな特徴としてはこんなところかなと思います。

あとはメソッドも定義できますし、モジュールにして名前空間を作ることができます。Vuexはstoreオブジェクトにすべてが内包されるためプロジェクト大きくなるにつれてstoreオブジェクトも大変大きくなる。できるだけモジュールに分割するほうが良いと思われる。

 

 

まとめ

超ざっくり書いてしまったのですが大変申し訳ございませんがこれ以上のことはVuexについてあまり知らないです。

今現在Vuexを実際にコーディングしながら勉強している段階です。

Vuexを書いて動かせるようになりましたら次は具体的な実装方法についての記事を書きたいと思います。

 

大変内容の無い記事になってしまいましたが最後まで読んでいただきありがとうございました。

 

参考サイト

label,

書いた人

銀座の事業会社でエンジニアをやっております。 まだまだぺーぺーです。

コメント

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です