Vue router, Vuexについて

Vue router

参考リンク
vue-routerとはVue.jsの公式ルータで、ページネーションアプリケーションです。
yarn add vue routerでインストールすることができ、package.jsonに自動で追加される

router.jsというファイルを作り以下のものを書く

import Vue from 'vue';
import VueRouter from 'vue-router';
import Top from './Top.vue';
import Game from './Game.vue';
import Finish from './Finish.vue';
import Notfound from './Notfound.vue';

Vue.use(VueRouter);

const routes = [
  { path: '/', component: Top },
  { path: '/game', component: Game },
  { path: '/finish', component: Finish },
  { path: '*', component: Notfound },
];

const router = new VueRouter({
  routes,
  mode: 'history'
});

export default router;

Vue.use(VueRouter)を用いてVueRouterを使用すると宣言
routesの配列の中でpathによって表示されるコンポーネントを設定
pathを*に設定することでnot foundのページを設定できる

modeをhistoryにすることでURLからhashが表示されなくなる

render先のApp.vueに以下のことを記述する

<template>
  <div id="app">
    <div class="container">
      <router-view />
    </div>
  </div>
</template>

<router-view />でコンポーネントを表示させる位置を決められる

Vuex

参考リンク
Vuexは状態管理パターン + ライブラリ。
今回はこれを使ってゲーム画面からゲーム終了画面に自動で遷移させることをする

Vuexを作った際に自動で作られたstore.jsに以下のものを記述する

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    result: {
      score: 0
    }
  },
  mutations: {
    setResultScore(state, { score }) {
      state.result.score = ~~score
    }
  }
})

export default store;

mutationsはstateの値を更新するために用いる

ゲーム画面を描画しているGame.vueに以下のものを記述する

<template>
  <div id="game">
    <girl />
    <fish />
    <cat />
    {{scoreStr}}
    <button @click="gameover()">ゲーム終了</button>
  </div>
</template>

<script>
import Girl from "./components/characters/Girl.vue";
import Fish from "./components/characters/Fish.vue";
import Cat from "./components/characters/Cat.vue";

export default {
  name: "App",
  components: {
    Girl,
    Fish,
    Cat
  },
  data() {
    return {
      score: 0
    };
  },
  computed: {
    scoreStr() {
      return `${this.score} 匹`;
    }
  },
  methods: {
    funcScore(newScore) {
      this.score = newScore + 1;
    },
    gameover() {
      this.funcScore(5);
      const score = this.score;
      this.$store.commit("setResultScore", { score });
      this.$router.push("/finish");
    }
  }
};
</script>

• 状態 現在の状態を表す(data())
• ビュー 宣言的なマッピング (computed)
• アクション ユーザー入力に反応して、状態の変更を可能にする方法(methods)

参考リンク
data()でscoreStrを０に設定しtemplete内で描画する
ボタンをクリックすることでgameover関数を走らせるようにした
@click=onclick

$store.commit('mutation名', payload)で値を呼び出すことができる
第二引数のことをpayloadと呼び、これを使用することで同じmutationで異なる値にstateを変更可能

ゲーム終了画面のFinish.vueには以下のものを記述する

<template>
  <div id="finish">
    <girl />
    <p>
      クロアシネコに
      <span>{{ resultScore }}匹</span>与えました！
    </p>
    <router-link to="/game">もう一度遊ぶ</router-link>
    <router-link to="/">トップ画面へ行く</router-link>
  </div>
</template>

<script>
import Girl from "./components/characters/Girl.vue";

export default {
  name: "Finish",
  components: {
    Girl
  },
  computed: {
    resultScore() {
      return this.$store.state.result.score;
    }
  }
};
</script>

結果は、、、

0匹だったものが６匹に変更できた！