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

Vue Router

Vue Router とは

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

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

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 のモジュールを読み込んでいます。

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

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

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

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

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

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

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

component: Home;

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

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

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

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 のインスタンスを生成しています。

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

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

<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 モジュールを読み込んだことによって使用できるコンポーネントです。

には、リンクに合わせたコンポーネントが表示されます。

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

<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 は以下の図のような構成になっており、矢印の向きでデータが流れていきます。

• アクション

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

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

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

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