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)
ゲッターは、ステートを取得する為の算出データ。
算出プロパティとの違いは引数が渡せるが、セッターはない。
プロパティやメソッドを受け取れる。
コンポーネントでいうcomputedmethodsの中間。
ただ引数付きのゲッターはキャッシュが行われないので、
何度かアクセスするデータはコンポーネントの算出プロパティに登録してキャッシュするのが良い。

ミューテーション(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、CSSJavaScriptを.vueという拡張子のファイルにまとめて記述し管理する。

マークアップ言語やスタイルシート言語の変更
PugSassなどを使用する場合には必要パッケージをインストールして以下のように記述する。
<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によるアプリケーション状態管理!
さらに便利に効率的に!ここからが面白い!


経営学 基礎編 ~社会で生き残る!~

経営とは

「人・物・金・情報」の4つを組み合わせて、顧客にサービスを提供する。
また株式会社では株主から資金を得て経営し、売り上げを一部を株主に配当金として渡す。
そのお金でさらに企業の株を買い、企業に投資する。


経営学と経済学の違い

1.経営学は「企業中心の考え方」
2.経済学は「日本や世界など全体の考え方」

マクロ経済学ミクロ経済学
1.マクロ経済学は景気向上の為に国のすべきことなど、
国全体の経済のメカニズム(向上する方法)を考える。

2.ミクロ経済学は不景気の状況での
消費者や企業の消費行動の法則(特徴)を考える。


Vue コンポーネントクライマックス編 -第3章- ~Vueマスター!~

スロット

スロットは親から子コンポーネントにテンプレートの一部を差し込む機能で
コンテンツやテンプレートの一部をカスタマイズする際に使用する。

デフォルトスロット

HTML
<parent>埋め込みたいもの</parent>
HTML
<div class="child">
<slot>埋め込まれる場所</slot> ->このまま実装すると[埋め込みたいもの]がはいる
</div>


名前付きスロット
複数のスロットを使用するときは、親と子のタグにslot=名前で名前をつけて使用する。

スコープ付きスロット
スロットはコンテンツ定義側のスコープが維持されるので、
子側のスコープにアクセスができない。
そんなときはslot-scopeを使い、
コンテンツの定義に必要なデータを子コンポーネントから取得する。


双方向データバインディング コンポーネント

おさらい
双方向データバインディングとは
v-modelでフォームの入力値を同期させて表示させる。
コンポーネント版ではv-modelprops$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の利便性をめちゃくちゃ高めます!