Vue SPA Vuex編 -第2章- ~Vuexの完全理解!~
ストアの分割
ストアはモジュール化し、分割することで管理しやすくする。
モジュールの使い方
オブジェクトで定義したモジュールを、ストアのmodules
オプションに登録する。
モジュール定義
const moduleA = { } const moduleB = { }
ストアに登録
const store = new Vuex.Store({ modules:{ moduleA, moduleB } })
モジュールのステートアクセス
store.state.moduleA store.state.moduleB
ネームスペース
同一のタイプをコミットする際に同期させたくない場合に別のタイプ名を使用する。
その際にモジュールを定義する際、namespaced
オプションをtrue
に設定して
ネームスペースを持つことが可能になる。
ネームスペースがついた場合/
で区切って呼び出す。
commit('<ネームスペース>/<タイプ>')
機能とオプション
ストアの状態を監視
Vuexでアプリケーションレベルのウォッチャを定義できる。
関数の第1引数にstate
、第2引数にgetters
を使用して監視するデータを返す。
Strictモード
strict : true
でコードを厳格にみる。
Vuexでホットリロード
APIメソッドstore.hotUpdate()
の設定が必要になる。
ただしVuex.Store
コンストラクタを使用するファイルは
ホットリロードが使用できないため
、別ファイルで作成する必要がある。
Vue SPA Vuex編 -第1章- ~VuexはDB!~
Vuex
状態管理の拡張ライブラリで、データとその状態に関する全てを一元管理する。
特徴
Vuexによって管理されているデータはリアクティブになっているため、
構造状態に関わらず常に同期されている。
またデータの管理や、状態を管理できるモジュール機能などを持つ。
ポリフィル
ES2015のPromise
に対応していないブラウザをサポートする為に
babel-polyfill
などのポリフィルをインストールする必要がある。
import 'babel-polyfill' import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex)
Store
Vuexで状態を管理する為ストアを作成する。
アプリケーション内の仮想的なデータベースと考える。
Vuex.Store
コンストラクタでインスタンスを作成する。
Vueアプリケーションにストアを登録する
ストアのインスタンスをVueアプリケーションのルートに登録すれば、
コンポーネントのインスタンスプロパティ$store
でどこからでも使用できる。
そして単一ファイルコンポーネントごとにstoreを読み込む必要がなくなる。
コアコンセプト
コンポーネントとVuexの機能の繋がり
コンポーネント ↓ アクション(store内) ←→ 外部API ↓ ミューテーション(store内) ↓ ステート(store内) ↓ コンポーネント ↓
と繰り返している流れ。
ステート(state)
ステートはストアで管理している状態そのもの。
ミューテーション以外からの変更はできない。
コンポーネントでいうdata
。
ゲッター(getter)
ゲッターは、ステートを取得する為の算出データ。
算出プロパティとの違いは引数が渡せるが、セッターはない。
プロパティやメソッドを受け取れる。
コンポーネントでいうcomputed
とmethods
の中間。
ただ引数付きのゲッターはキャッシュが行われないので、
何度かアクセスするデータはコンポーネントの算出プロパティに登録してキャッシュするのが良い。
ミューテーション(mutations)
ステートを変更できる唯一のメソッド。
コンポーネントでいうmethods
。
ミューテーションとアクションのメソッドはタイプと呼ばれる。
引数で以下の情報が受け取れる。
1.state ステート
2.payload コミットからの引数
コミット(commit)
ミューテーションを呼び出すためのインスタンスメソッドがコミット。
コンポーネントでいう$emit
。
引数の使用可。
アクション(action)
非同期処理を含めることができるメソッドで、
データの処理や非同期処理を行い、結果をミューテーションへコミットする。
ステートを変更する以外の処理はアクション内で済ませるのが良い。
ディスパッチ(dispatch)
登録されているアクションを呼び出すインスタンスメソッドで、
別のアクション内からも使用できる。
ミューテーションとpayload
の扱いは同じ。
Vuexの小さなまとめ
1.アプリケーションレベルの状態まではストアで管理する。
2.ミューテーション内でしか状態変更ができない。
3.非同期処理はコミット前!
次回!
これ以上管理しやすく!?Vuexのさらなる知識!
Vue SPA 基礎編 ~フロントエンドへの一歩~
Vue CLI
環境構築編でも触れましたが、
Vue CLIとは開発支援のためのコマンドラインインターフェース。
アプリケーションのビルドなどの支援をする。
またwebpackに必要なファイルを自動的に作成もする。
webpack
こちらも環境構築編で触れましたが、
複数のJSファイルをモジュール化して、それを組み合わせて表示する。
その際にモジュールをまとめるバンドルツールがwebpack。
クロスドメイン対策
config/index.js
proxyTable: { '/api':{ target: 'http://localhost:8081', changeOrigin:true, pathRewrite: { '^/api':'/dev/api/' } } },
本番環境が/api
だが
開発環境では/dev/api
となる。
単一ファイルコンポーネント
Single File Components 通称「SFC」
HTML、CSS、JavaScriptを.vue
という拡張子のファイルにまとめて記述し管理する。
マークアップ言語やスタイルシート言語の変更
Pug
やSass
などを使用する場合には必要パッケージをインストールして以下のように記述する。
<template lang="sass">
Vue.jsプラグイン
グローバルメソッドのVue.use
でVue.jsに登録する。
import Vuex from 'vuex' Vue.use(Vuex)
プラグイン自作
install
という名前の公開されたメソッドを定義し、Vue.use
で受け取れる。
インスタンスプロパティを登録する場合は$
から始まる名前を使用する。
ES2015(ES6)モジュール
ECMAScript
ES5に比べて運用しやすい。
ただ書き方が少し変わる。
大きな違い
変数宣言
var が let か constになる
functionの省略
hoge : function(){ }
-> hoge() { }
Promise
非同期処理を抽象化したオブジェクト、操作する仕組みになっている。
非同期処理の完了をしり、引数にresole
(解決)、reject
(拒否)のコールバック関数で結果によってどちらを呼び出す。
次回!
Vuexによるアプリケーション状態管理!
さらに便利に効率的に!ここからが面白い!
Vue コンポーネントクライマックス編 -第3章- ~Vueマスター!~
スロット
スロットは親から子コンポーネントにテンプレートの一部を差し込む機能で
コンテンツやテンプレートの一部をカスタマイズする際に使用する。
デフォルトスロット
HTML <parent>埋め込みたいもの</parent>
HTML <div class="child"> <slot>埋め込まれる場所</slot> ->このまま実装すると[埋め込みたいもの]がはいる </div>
名前付きスロット
複数のスロットを使用するときは、親と子のタグにslot=名前
で名前をつけて使用する。
スコープ付きスロット
スロットはコンテンツ定義側のスコープが維持されるので、
子側のスコープにアクセスができない。
そんなときはslot-scope
を使い、
コンテンツの定義に必要なデータを子コンポーネントから取得する。
双方向データバインディング コンポーネント版
おさらい
双方向データバインディングとは
v-model
でフォームの入力値を同期させて表示させる。
コンポーネント版ではv-model
とprops
、$emit
を駆使する。
.sync
.sync
修飾子では複数の属性を同期させることが可能。
$emit
がトリガとなる。
色んなテンプレートの定義
templateオプション
template
オプションに直接かく。
単一ファイルコンポーネントを使用しない場合に推奨。
単一ファイルコンポーネント
コンポーネント単位でJavaScriptとHTMLとCSSをセットにして.vue
拡張子のファイルに書く。
独自フォーマットでビルド環境が必要。
中規模開発以上で推奨。
描画関数
正確にはテンプレートではないが、DOMを構築するための方法。
仮想DOMについて深く理解する必要がある。
難易度が高め。
コンポーネントの色々
関数型コンポーネント
ライフサイクルや監視が行われないためパフォーマンスを最適化できる。
functional
オプションを付与することで、状態とインスタンスを持たない。
props
を使えるためデータは使えないが有効になる。
動的コンポーネント
コンポーネントの切り替えができる。
属性is
を使用する。
Mixin
複数のコンポーネントの同一処理を行なっている場合、
オプションを抜き出して共通処理を行う。
コンポーネントのライフサイクル
要素が切り替わるタイミングでインスタンスが破棄され、初期化されるので注意。
keep-alive
組み込みコンポーネント<keep-alive>
を使用すると、
破棄されず、コンポーネントと状態を維持される。
Vue コンポーネント親子関係編 -第2章- ~関係を制覇しろ!~
親子関係(親子コンポーネント)
テンプレートで他のコンポーネントを使用すると親子関係になる。
props
とカスタムイベント
を使用する。
親コンポーネント→子コンポーネント
データバインディングで親のデータを子コンポーネントが使用できる。
props down
というデータフロー
親 <child v-bind:val="test">
子 Vue.component('child'.,{ props:['val'] })
注意
props
で受け取った値を子コンポーネント側から変更することはできない。
もし変更した場合は、算出プロパティを使用して新たなデータとして定義する。
また子コンポーネント側から元のデータ自体に変更する場合は$emit
を使用することができる。
受け取りデータの指定
props
では受け取り型(Stringなど)の指定が推奨されており、指定の型以外の場合は警告をだす。
またデフォルト値や必須項目を定義できる。
子コンポーネント→親コンポーネント
子コンポーネントから親コンポーネントに変更をする場合や、
データを渡す場合は
カスタムイベント
と、インスタンスメソッドの$emit
を使用する。
event up
というデータフロー
親 <child v-on:test-event="method"> ->test-eventが発生したらmethodを呼び出す。
子 this.$emit('test-event')
親が子コンポーネントのイベントを認識する
1.v-on
ディレクティブ(@で省略可能)で子のイベントをハンドルする。
2.$emitでトリガーする。
親子コンポーネントの色々
非親子コンポーネント
親子以外のコンポーネント間ではVueインスタンスをイベントバス
として使用する。
ただ複雑化した場合、Vuexの導入を検討した方が良い。
var bus_test = new Vue()
bus_test.$emit('bus_test')
bus_test.$on('test-event',function(){ //test-eventが発火した際の処理 //thisはbus_testのインスタンス })
子コンポーネントを参照する
親が子のメソッドを使用したい場合に$refs
を使用する。
次回
コンポーネントの制覇!
SPAの足がかり!
Vue コンポーネント基礎編 -第1章- ~コンポーネントは核である!~
コンポーネント
テンプレート(html)とJavaScriptをセットにして、
機能ごとに分割して管理できるようにする仕組み。
例:headerのセット,mainのセットとして最終的に組み合わせる。
コンポーネントの定義
Vue.component
メソッドでグローバルに登録しすべてのコンポーネントから使用できる。
テンプレート内ではケバブケース<test-component>
で記述。
またコンポーネントはルートインスタンスnew Vue()
する前に定義する。
ローカルの定義
ローカルとしてコンポーネントのスコープ内だけで使用するには
コンポーネントの定義を特定のコンポーネントのcomponents
オプションに定義する。
コンポーネントのオプション
1.データやメソッドを定義できる。
2.dataはオブジェクトを返す関数にする必要がある。
3.テンプレートのルート要素は単一にする必要がある。
4.コンポーネントを複数使用した場合、別々のインスタンスになる。
コンポーネント間の通信
コンポーネントのインスタンスはスコープがあり、
スコープ内のデータやメソッドは、this
でアクセスできる。
スコープ外のアクセス、コンポーネント間の連携
1.propsとカスタムイベントを使う(親子間の通信)
2.イベントバスを使う(非親子間)
3.Vuexの状態管理
次回
親子間通信を学ぶ!
Vueの利便性をめちゃくちゃ高めます!