0
Help us understand the problem. What are the problem?

posted at

updated at

Vue.jstとVuexに入門してまだ3日だけどコンポーネントの扱い方についてメモしておく

これは「「はじめに」の Advent Calendar 2021」11日目の記事です。

※駄文ですが、自分の考えをまとめるためのメモです。

Vue.jsとは

ユーザーインターフェイスを構築するためのプログレッシブフレームワーク(公式より抜粋)

Vuexとは

Vue.jsアプリケーションのための利用できる、状態管理パターン+ライブラリ(公式より抜粋)

状態管理

実はVue.jsだけでも状態管理はできます。

state.png

ただ、コンポーネントとの依存が強く、アプリケーションの規模が大きくなり、コンポーネントが増えてくると、このままでは難しくなります。

そこで、アプリケーション全体の状態とVueコンポーネント個別の状態を同期しつつしつつ、うまく分離する方法が必要になってきます。

vuex.png

VuexはVueコンポーネントから状態管理という責務を抽出し担っています。

Vueコンポーネント

一言に状態と言っても、大きく分けて2種類ありそうです。

  1. アプリケーションデータ
  2. 画面の表示制御に使うデータ

また、Vueコンポーネントもいくつか種類がありそうです。

  1. パーツとして再利用できるコンポーネント
    • リッチなセレクトボックスとか、カレンダー選択できるInputとか。
  2. パーツが組み合わさリ、データに依存しない機能を提供するコンポーネント
    • フィルター機能やソート機能がある一覧表示とか
  3. データに依存して、価値を提供することができる単位のコンポーネント
    • Vueだと views に配置するようなもの

コンポーネントの大きさとしては下に行くほど大きくなり、 3 → 2 → 1という依存関係になります。

Atomic designと照らし合わせると

  1. Atoms
  2. Molecules、Organisms
  3. (Templates)、Pages

になりそうです。
(※Templatesは迷いがあります)

現時点(2021/12/11)の自分の判断だと、
- Vuexは アプリケーションデータ だけを保持する*
- Vuexを利用するのは、Templates, Pages
- Atoms、Molecules、Organisms はpropsを利用し 画面の表示制御に使うデータとして扱う

とすると、アプリケーションデータと画面の表示制御に使うデータはどう区別するのか、ですが
- Vue.js アプリケーションの外部から取得しVue.js外で保存する必要があるデータをアプリケーションデータとする

で良い気がしています。それ以外のデータはすべて表示制御用データとして扱うのが良さそうです。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
0
Help us understand the problem. What are the problem?