【Vue.js】Vue RouterとVuexについての説明

#Vue Router

##Vue Router とは
Vue router は、Vue.js でページ遷移を管理するためのモジュールです。

Vue router に関する記述は**sample-app/src/router/index.js**にあります。
 ファイルの中身は以下のようになっているかと思います。

```javascript:sample-app/src/router/index.js

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/about",
    name: "About",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue"),
  },
];

const router = new VueRouter({
  routes,
});


export default router;
```

以下の二箇所では、Vue の本体と、Vue router のモジュールを読み込んでいます。

```javascript
import Vue from "vue";
import VueRouter from "vue-router";
```

こちらでは、ページ遷移させるコンポーネントが読み込まれています。

```javascript
import Home from "../views/Home.vue";
```

こちらでは、ページの情報のオブジェクトが、配列として格納されています。

pathには、どのパスでページ遷移させるのかを記述します。

nameには、ルーティングに名前をつけることができます。リンクを作成する時に、パス名ではなく、name で指定できるので、
パスを変更したいときなど、routesの path のみを変更するだけで済みます。

componentには、どのコンポーネントにページ遷移させるのかを記述します。コンポーネントの呼び出し方は 2 種類あり、
import で読み込んだコンポーネントを

```javascript
component: Home;
```

のように呼び出す方法と、

```javascript
component: () => import(/* webpackChunkName: "about" */ "../views/About.vue");
```

と呼び出す方法があります。

```javascript
const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/about",
    name: "About",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue"),
  },
];
```

こちらでは、Vue router のインスタンスを生成しています。

```javascript
const router = new VueRouter({
  routes,
});
```

sample-app/src/app.vueを開き、Vue router がどのように使われているかをみてみましょう。

```html
<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view />
  </div>
</template>
```

router-linkと、router-viewは Vue router モジュールを読み込んだことによって使用できるコンポーネントです。

<router-view/>には、リンクに合わせたコンポーネントが表示されます。

<router-link>では、to 属性にリンク先のパスを渡します。 
to 属性には、パスだけではなく、ルートのに名前をつけている場合は、以下のようにオブジェクトを指定して記述することもできます。

```javascript
<router-link :to="{ name: 'home' }">home</router-link> |
<router-link :to="{ name: 'about' }">About</router-link>
```

#Vuex
##Vuex とは
Vuex は、**データを管理するためのモジュール**です。

 アプリケーションが大きくなるにつれて、データをコンポーネント間でやり取りすると、かなり複雑な作りになってしまいます。 
そういった状況に対して、データの管理をしやすくするために、Vuex を用います。

Vuex は、Action(アクション),Mutation(ミューテーション),State(ステート),Getter(ゲッター)の 4 つから構成されます。

Vuex は以下の図のような構成になっており、矢印の向きでデータが流れていきます。

![A3s0Sa.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1246814/9040c1b0-66a0-3abd-6846-6b9b3d264abe.jpeg)

- アクション

アクションはコンポーネントからデータの更新や、データの取得の指示を受ける部分になります。コンポーネントは、必要に応じてアクションを呼び出すことができ、コンポーネントから受け取ったデータをミューテーションに受け渡すことができます。

- ミューテーション
アクションから受け取ったデータをステートに保存したり、既存のデータを更新する役割を担います。全てのデータの変更は、ミューテーションを介して行われます。

- ステート
ステートはデータの入れ物で、ストアのデータは全てステートの保持されます。

- ゲッター
コンポーネントがデータを受け取る時、ステートからそのままデータを受け取る場合と、ゲッターを介して受け取る場合があります。データに加工が必要がない場合は、ステートからそのまま受け取れば良いのですが、何かしらの加工が必要な場合は、ゲッターを介して、データを加工してから、コンポーネントに受け渡しています。