Vue Router + Vuex

Introduction
Vue を使い始めの頃は、それまでの js の書き⽅と⽐べてどこを状
態として分けて考えるか、他のライブラリと⽐べて覚えることが
多く、素の js で書く⽅が楽と感じることも出てくるかと思います
(実際私がそんな感じ)。
ですが、素の js だと開発者によってコーディングに違いが出てく
るのを、Vue によって⼤枠の規約を設けることで、記述の粒度を
まとめることにつながると思われます。
Vue が「フレームワーク」とも⾔われるところで、そういう点で
Laravel等のサーバサイドフレームワークにも近しいところではな
いでしょうか。

Agenda
1. Vue Router
2. Vuex
3. Appendix

About Vue Router
Vue.js 公式のルーティング系ライブラリ。
URL に応じてコンポーネントの表⽰切り替え、切り替え時の
transition等ルーティング機能が豊富。SPA (シングルページアプ
リケーション)構築において有⽤なライブラリとなっています。
https://router.vuejs.org/ja/

About SPA
シングルページアプリケーションの略。
単⼀ html で構成され、URL の切り替えに応じてAjax 等で部分的な描
画切り替えが可能。画⾯遷移を感じさせないストレスレスなユーザ体
験が可能になる⼀⽅、js で動的表⽰することから SEO に弱いとされて
います。
Header NavLogo
Home
Footer
Header NavLogo
About
Footer
Home と About
部分を切替

Setup
(1) Download
https://github.com/vuejs/vue-router
Vue Router の Github リポジトリ、dist ディレクトリに格納

Setup
(2) CDN
https://router.vuejs.org/ja/installation.html#%E7%9B%B4%E6%8E%A5%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89-cdn
vue.js の後に vue-router.js のファイルを読み込みます。

Setup
(3) npm
https://router.vuejs.org/ja/installation.html#npm

1. Vue Router
1) Implementation
2) Routing
3) Navigation
主におさえておくポイントは 3 つ。
補⾜ポイントは Appendix に記載。

1) Implementation
Download / CDN
https://router.vuejs.org/ja/installation.html#%E7%9B%B4%E6%8E%A5%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89-cdn
// パス設定をパラメータに渡し VueRouter をインスタンス化
const router = new VueRouter({
routes: [
{ path: ‘/’, component: Home } // ‘/’ に Home コンポーネント
]
})
JS
Download あるいは CDN で vue-router.js を読み込んだ場合、VueRouter をグロー
バルで参照することができます。使⽤にあたり、パス設定(どのURLに対し、どの
コンポーネントを描画するか)を渡して ‘new VueRouter(…)’ でインスタンスを作
成します。

# [1] npm or yarn で vue-router をインストール
npm install vue-router
SH
npm (1/2)
1) Implementation

JS
import Vue from ‘vue’
import VueRouter from ‘vue-router’
// [2] Vue.use(…) でプラグインをインストール
Vue.use(VueRouter)
// [3] パス設定をパラメータに渡し VueRouter をインスタンス化
routes: [
{ path: ‘/’, component: Home } // ‘/’ に Home コンポーネント
]
})
npm の場合、まず vue-router パッケージをインストールして、
‘import xxx from ‘vue-router’’ でモジュールをインポート。
‘Vue.use( xxx )’ でプラグインをインストールして、以降は Download / CDN と同じく
Vue Router のインスタンスを作成。
npm (2/2)
1) Implementation

JS
// ルート Vue インスタンスにインスタンス化した変数を
// router に渡すことで、内部コンポーネントから参照可能に。
new Vue({
el: ‘#app’,
// router: router と同義
router,
mounted(){
console.log( this.$router )
}
})
Download / CDN / npm ともに、先述の設定を⾏なったのち本ページのように Vue
インスタンスにインジェクト(インスタンス⽣成のオプションとして受け渡す)す
ることによって、インスタンス内のコンポーネント含め ‘this.$router’ でルータを
参照することができます。
Injection to Vue instance
1) Implementation

2) Routing
Setting for Path (1/3)
https://router.vuejs.org/ja/guide/essentials/dynamic-matching.html#%E3%83%91%E3%83%A9%E3%83%A1%E3%83%BC%E3%82%BF%E3%83%BC%E5%A4%89%E6%9B%B4%E3%81%AE%E6%A4%9C%E7%9F%A5
routes: [
// ‘/’ でアクセスしたら Home コンポーネント
{ path: ‘/’, component: Home },
// ‘/about’ でアクセスしたら About コンポーネント
{ path: ‘/about’, component: About },
// ‘/post/:id’ でアクセスしたら Post コンポーネント
{ path: ‘/post/:id’, component: Post },
]
})
JS
URL の設定は、VueRouter のインスタンス作成時に routes パラメータとして渡しま
す。どの URL(path: ‘…’) に対してどのコンポーネント(component: XXX) を描画するか
指定します。’/post/:id’ のようにコロン(’:’)をつけると、ユーザ詳細や投稿詳細画⾯
等のような動的 URL(詳細画⾯ごとにURLが固有に振られる) で扱われます。

https://router.vuejs.org/ja/guide/#html
// html 側に<router-view></router-view>で記述しても良い
// 空要素タグ(<router-view />)でも OK
new Vue({
el: ‘#app’,
// router-view 要素にルーティングの URL に応じて描画
template: `
<div>
<router-view></router-view>
</div>
`
})
JS
先の URL 設定は、router-view 要素に描画されます。
2) Routing

// Post コンポーネント
const Post = {
// ルータの ‘:id’ 部分をパラメータとして参照することができます
template: `<p>{{ $route.params.id }}</p>`
}
… new VueRouter({ routes: [
// ‘/post/3456’ でアクセスされたら Post コンポーネントを呼び出し
{ path: ‘/post/:id’, component: Post },
])
JS
動的 URL に振られた動的セグメント(上記では’:id’) を、対応するコンポーネント
内で ‘$route.params.[動的セグメント名]’ により参照することができます。
例えば、マイページで ID を表⽰したり、それを元にそのユーザの投稿履歴で
フィルタして表⽰することもできるでしょう。
2) Routing

const Post = {
template: `…`,
watch: {
// パスの監視
‘$route’ (to, from) {
console.log( from )
console.log( to )
}
}
}
JS
詳細ページ等の動的URLは同じコンポーネントを再利⽤します。
その場合、URL の切り替えを検知するには、インスタンスでもdata等の監視に使っ
たウォッチャ(watch)が活⽤できます。
通常のwatchで扱うのと同じく、
第1引数(to)が [変更後の値]、
第2引数(from)が[変更前の値]
watch
2) Routing

const Post = {
template: `…`,
watch: {
// パスの監視
‘beforeRouteUpdate’ (to, from, next) {
console.log( from )
console.log( to )
next() // next() を実⾏しないと描画が更新されない
}
}
}
JS
beforeRouteUpdate
2) Routing

https://router.vuejs.org/ja/guide/essentials/navigation.html
ナビゲーションの設定⽅法として 2 通りあり、html で設定する場合は
’<router-link>’ が使えます。aタグとして表⽰され、対応するコンポーネントに対
するナビゲーションにはカレント設定として、’router-link-active’クラスが付与さ
れます。
<div id=“app”>
<div>
<!— html 側で URL 切替を⾏うには、router-link を使⽤ —>
<!— 動的な切替であれば v-bind:to=“…” —>
<router-link to=“/”>Home</router-link>
<router-link to=“/about”>About</router-link>
</div>
<router-view></router-view>
</div>
HTML
router-link
3) Navigation

https://router.vuejs.org/ja/guide/essentials/navigation.html
new Vue({ …
methods: {
goPostDetail( n ) {
this.$router.push( ‘/post/?id=’ + n ) // ⽂字列 path のみ
// this.$router.push({ path: ‘/post/?id=’ + n }) // オブジェクト
// this.$router.push({ path: ‘/post’/, query: { id: n } }) // query 付与
}
}
})
JS
もう1つは、’router.push(…)’ によるナビゲーション設定です。new Vue({…}) に
ルータを注⼊すると ’this.$router’ でアクセスできるため、’this.$router.push(…)’ に
よって遷移することができます。引数は、⽂字列パスあるいはオブジェクト形式
(path キーにパス記述、パラメータは query 指定)で指定できます。
router.push(…)
3) Navigation

About Vuex
Vue.js と連携した状態管理ライブラリ。
Store でアプリケーションを管理し、state(状態), getters(参照),
mutations(更新), actions(mutationを実⾏するトリガー)の4つが内包され
ています。
https://vuex.vuejs.org/ja/

Why Vuex? (1/2)
親⼦コンポーネント間の連携は、props /
emit によって可能ですが、
・複数コンポーネントが共通の状態を参照
・複数コンポーネントが共通の状態を更新
・ネストの深いコンポーネント構造
そうすると、
ルートコンポーネントに集約して数珠つ
なぎ的に props / emit を実⾏することにな
り、アプリケーション設計の⾒通しも悪く
なります。初期設計次第で Vuex を使わず
に済むこともできそうなものの、運⽤や機
能拡張を経て複雑化する恐れがあります。
親コンポーネント
⼦コンポーネント
孫コンポーネント
曽孫コンポーネント
⽞孫コンポーネント
…コンポーネント
ルート
コンポーネント

Vuex は上図のようなサイクルを以って、状態管理を⾏います。
・アプリケーションにおける状態の集約
・状態更新のフローが⼀⽅向である
上記のような役割の明確化によって更新フローの⾒通しが良くなります。
Why Vuex? (2/2)
https://vuex.vuejs.org/ja/

Store Structure (1/2)
Store
(アプリケーションの状態を保持するコンテナ)
State
アプリケーションの状態を管理 (Vue インスタンスの data のような)
Getters
アプリケーションの状態を参照
Mutations
アプリケーションの状態を更新
Actions
アプリケーションの状態を更新するトリガー(⾮同期処理含む)
Vuexでは上記の構成でストアを作成することにより、
コンポーネントから独⽴した状態を管理することができます。
mutation
を発⽕
state
を更新

Store Structure (2/2)
new Vuex.Store({
state: { // この中に state を記述
},
getters: { // この中に getters を記述
},
mutations: { // この中に mutations を記述
},
actions: { // この中に actions を記述
}
})
JS
前のスライドの構成をコードに起こすと上記のような記述になります。
`new Vuex.Store(…)` でストアを作成し、そのオプションで state, getters,
mutations, actions を定義します。
記述の違いはありますが、state = dataに置き換えて考
えると、Vueインスタンスのように内部に使いたいオ
プションを追加するイメージと捉えると近いものを感
じます。

Setup
(1) Download
https://github.com/vuejs/vuex
Vuex の Github リポジトリ、dist ディレクトリに格納

Setup
(2) CDN
https://vuex.vuejs.org/ja/installation.html#%E7%9B%B4%E6%8E%A5%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89%E3%81%99%E3%82%8B-cdn
vue.js の後に vuex.js のファイルを読み込みます。

Setup
(3) npm
https://vuex.vuejs.org/ja/installation.html#npm

2. Vuex
1) Implementation
2) State
3) Getters
4) Mutations
5) Actions

1) Implementation
Download / CDN
// Vuex のストアを作成
const store = new Vuex.Store({
state: {
count: 0
},
…
})
JS
Download あるいは CDN で vuex.js を読み込んだ場合、Vuex をグローバルで参照
することができます。使⽤にあたり‘new Vuex.Store({…})’ でストアを作成します。

# [1] npm or yarn で vuex をインストール
npm install vuex —save
# OR
yarn add vuex
SH
npm (1/2)
1) Implementation

JS
import Vue from ‘vue’
import Vuex from ‘vuex’
// [2] Vue.use(…) でプラグインをインストール
Vue.use(Vuex)
// [3] Vuex のストアを作成
// state, getters, mutations, actions を定義
state: { count: 0 },
…
})
npm の場合、まず vuexパッケージをインストールして、
‘import xxx from ‘vuex’’ でモジュールをインポート。
‘Vue.use(…)’でプラグインをインストールし、以降はDownload / CDN と同じくVuex
のストアを作成。
npm (2/2)
1) Implementation

JS
// ルート Vue インスタンスにインスタンス化した変数を
// store に渡すことで、内部コンポーネントから参照可能に。
new Vue({
el: ‘#app’,
// store: store と同義
store,
mounted(){
console.log( this.$store )
}
})
Download / CDN / npm ともに、先述の設定を⾏なったのち本ページのように Vue
インスタンスにインジェクト(インスタンス⽣成のオプションとして受け渡す)す
ることによって、インスタンス内のコンポーネント含め ‘this.$store’ でストアを
参照することができます。
Injection to Vue instance
導⼊はVue Routerと記述内容が違うものの、
1.Vue.use(…)
2.new VueRouter(…) / new Vuex.Store(…)で作成
3.ルート Vue インスタンスに注⼊
というフローでは共通
1) Implementation

https://vuex.vuejs.org/ja/guide/state.html
// state はオブジェクト形式で状態をセット
state: {
count: 0
}
…
})
// コンポーネント側では以下の形で state にアクセス
console.log( this.$store.state.count ) // 0
JS
2) State
アプリケーションの状態は state プロパティ内で管理します(上記では ‘count’ キー
を作り、初期値を 0 に)。ルート Vue インスタンスでストアを注⼊すると、state
には ‘this.$store.state.[プロパティ名]’ で参照することができます。

https://vuex.vuejs.org/ja/guide/getters.html
// getters はオブジェクト形式で状態参照する関数を登録
getters: {
// getCount 関数を定義
// - computed のように returnで返します
// - 第1引数はストアの state にあたります
getCount( state ){
return state.count
}
}
})
JS
3) Getters
state は ‘this.$store.state.[プロパティ名]’ で参照できますが、state の構造がネスト化されてい
ると記述が冗⻑化してしまいます。getters では state 参照する関数を定義でき、これを使う
ことで state 参照の記述がスマートになります。コンポーネントから
‘this.$store.getters.[関数名]’ で参照でき、上記では ‘this.$store.getters.getCount’ でできます。

https://vuex.vuejs.org/ja/guide/mutations.html
// mutations はオブジェクト形式で状態更新する関数を登録
mutations: {
// setCount 関数を定義
// - 第1引数はストアの state にあたります
// - 第2引数は state に更新するプリミティブ or オブジェクト
setCount( state, payload ){
state.count += payload.count
}
}
})
JS
4) Mutations
state 更新は mutations で⾏います。これは state.count += 10 のような記述により
更新処理が乱雑になるのを防ぐためです。コンポーネントからは、
‘this.$store.commit([関数名], [更新する値])’ で呼び出すことができ、上記では
‘this.$store.commit( ‘setCount’, { count: 5 } )’ で state.count を 5 増やします。

https://vuex.vuejs.org/ja/guide/actions.html
// actions はオブジェクト形式で状態参照する関数を登録
actions: {
// setCount 関数を定義
// - 第1引数はストア(context) にあたります
// - 第2引数は mutations 渡すプリミティブ or オブジェクト
setCount( context, payload ){
context.commit( ‘setCount’, payload )
}
}
})
JS
5) Actions
UIに対するユーザアクションやAPIといった⾮同期処理は actions で⾏います。
コンポーネントからは、
‘this.$store.dispatch([関数名], [関数に渡す値])’ で呼び出すことができ、上記では
‘this.$store.dispatch( ‘setCount’, { count: 5 } )’ で mutations の ‘setCount’ を⾏います。

Practice (1/3)
Vue Router の演習として、上記のような画⾯構成で作ります。
Nav のリンクによって、Home/About を切り替えてください。
Header NavLogo
Home
Footer
Header NavLogo
About
Footer
Home ページ(/) About ページ(/about)
リンクを設置

Practice (2/3)
Home ページ(/)

Practice (3/3)
About ページ(/about)

6. Appendix
(1) Computed - Setter
(2) Vue Router - Props
(3) Vue Router - History mode

https://jp.vuejs.org/v2/guide/computed.html#%E7%AE%97%E5%87%BA-Setter-%E9%96%A2%E6%95%B0
算出プロパティでは、通常プロパティ名を指定して return で返しますが、算出プ
ロパティを更新する setter を定義することができます。
記述⽅法として、オブジェクト形式にしてその中に set(value){…}, get(){…} という
関数を記述します。
computed: {
// setter / getter を使う場合、オブジェクト形式として記述
inputCount: {
set(value) {
// this.inputCount = ‘…’ を実⾏することでこの中の処理を実⾏
},
get() {
// 通常の算出プロパティのように return で返す処理を記述
}
}
}
JS
Computed
Setter

https://router.vuejs.org/ja/guide/essentials/passing-props.html
ルーティング設定にて props プロパティに true を指定することで、動的セグメン
トの部分を props で受け渡すことができます。
これにより ‘$route.params.[動的セグメント名]’ で参照することなく、コンポーネ
ントの柔軟性も保たれます。
// Post コンポーネント
const Post = {
props: [ ‘id’ ],
template: `<p>{{ id }}</p>`
}
… new VueRouter({ routes: [
// props プロパティを追加、true にすると props として受け渡し
{ path: ‘/post/:id’, component: Post, props: true },
])
JS
Vue Router
Props

https://router.vuejs.org/ja/guide/essentials/history-mode.html#%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%81%AE%E8%A8%AD%E5%AE%9A%E4%BE%8B
初期設定では hash モード(’#’が付与され、URL 切替に応じてパスがその末尾に付
与される)とハッシュ(‘#’)付きの URL になりますが、history モードではハッシュ
をつけない URL にすることができます。
ただし、導⼊にあたり加えてサーバ側設定が必要になります。
// history モードに切り替えるには modeプロパティを以下に設定
mode: ‘history’,
routes: [
// ルーティングパスを指定
]
})
JS
Vue Router
History mode (1/2)

https://router.vuejs.org/ja/guide/essentials/history-mode.html#%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%81%AE%E8%A8%AD%E5%AE%9A%E4%BE%8B
Vue Router
History mode (2/2)
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
サーバの設定(上記はapacheの場合)。
以下リンクに nginx や node.js といった設定も記載。

Vue Router + Vuex

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a Vue Router + Vuex

Semelhante a Vue Router + Vuex (20)

Mais de Kei Yagi

Mais de Kei Yagi (7)

Último

Último (7)

Vue Router + Vuex