====== 18.Nuxt.jsとBulmaでハンバーガーメニュー ======
状態管理システムvuexが難しすぎて理解できないので、わかりやすいサイトをひたすら写経して理解しようと努力していくシリーズの5回目。

今回は、[[https://qiita.com/isamusuzuki/items/5ec800e423a3a56ef03d|Nuxt.jsにBulmaを組み込んだら、Vuexストアが理解できた件(20180503更新)]]を写経してみたいと思います。

→最初、CodeSandbox上で行おうと努力しましたが、どうしても、VuetifyやBulma, Font Awesomeのインストールがうまくいかず、ローカル環境で行う方針に変更しました。そのため、環境構築は、面倒なこととなっています。
===== 初めてのVuex目次 =====
[[14.vue.jsのvuexで入力フォーム:index.html|14.vue.jsのvuexで入力フォーム]]

[[15.vue.jsのvuexでカウンター:index.html|15.Vue.jsのvuexでカウンター]]

[[16.vue.jsのvuexでパスワード制限:index.html|16.vue.jsのvuexでパスワード制限]]

[[17.nuxt.jsのvuexでパスワード制限:index.html|17.Nuxt.jsのvuexでパスワード制限]]

[[18.nuxt.jsとbulmaでハンバーガーメニュー:index.html|18.Nuxt.jsとBulmaでハンバーガーメニュー]]

[[19.nuxt.jsで画像一覧アプリ:index.html|19.Nuxt.jsで画像一覧アプリ]]



===== すること =====
  -Nuxt.jsのVuexを用いて、Bulmaのレスポンシブなハンバーガーメニューを実装する

今回は、[[https://qiita.com/isamusuzuki/items/5ec800e423a3a56ef03d|Nuxt.jsにBulmaを組み込んだら、Vuexストアが理解できた件(20180503更新)]]を写経させていてだきました。

ソースコード
https://github.com/adash333/Nuxt-Bulma-Hamburger3

スクリーンショット
{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190208-195135.png}}

===== 開発環境 =====

<code>
Panasonic CF-RZ4
Window 8.1 Pro
VisualStudioCode 

git version 2.17.1.windows.2
node 10.14.1
yarn 1.12.3


</code>

===== 新規Nuxt.jsアプリの作成 =====
  *VisualStudioCodeのターミナル画面で、以下を入力
<code>
yarn create nuxt-app Nuxt-Bulma-Hamburger3
</code>
いろいろ聞かれるので、以下のように設定します。
  -プロジェクト名は？ => (Enter)
  -プロジェクトの一言説明は？ => (Enter)
  -サーバーフレームワークは？ => 使わない
  -eslintは使う？ => PWA supportを入れる（Linterは使わない）
  -UIフレームワークは？ => bulma
  -testフレームワークは？ => 使わない
  -レンダリングモードは？ => ユニバーサルじゃなくてシングルページアプリケーション
  -axiosモジュールは使う？ => 使わない
  -作者名は？ => (Enter)
  -パッケージマネージャは？ => npmじゃなくてyarn
{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190208-152615.png}}
<code>
cd Nuxt-Bulma-Hamburger3
yarn run dev
</code>
{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190208-152758.png}}
  *アドレスをCtrlを押しながらクリックすると、以下のページが開きます。
{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190208-152901.png}}

これで、Nuxt.jsでBulmaを使用する準備が出来ました。


===== インデックスページ以外のページ（about.vueとcontact.vue）を作成 =====
pages/ディレクトリで、about.vueとcontact.vueの新規作成を行う。

pages/about.vue
<code>
<template>
  <section class="hero is-primary is-bold">
    <div class="hero-body">
      <h1 class="title is-size-2">About</h1>
      <h2 class="subtitle is-size-4">NBH3とは？</h2>
    </div>
  </section>
</template>
</code>
{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190208-154546.png}}

pages/contact.vue
<code>
<template>
  <section class="hero is-info is-bold">
    <div class="hero-body">
      <h1 class="title is-size-2">Contact</h1>
      <h2 class="subtitle is-size-4">連絡先はこちらです</h2>
    </div>
  </section>
</template>
</code>
{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190208-154515.png}}


===== ナビゲーションバーのコンポーネントを作成する =====
components/Navbar.vue
<code>
<template>
  <nav class="navbar is-white" role="navigation" aria-label="main navigation">
    <div class="navbar-brand">
      <div class="navbar-item">NBH3</div>
      <div class="navbar-burger" data-target="navMenu">
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div><!-- navbar-brand END -->
    <div class="navbar-menu" id="navMenu">
      <div class="navbar-end">
        <nuxt-link to="/" class="navbar-item">トップ</nuxt-link>
        <nuxt-link to="/about" class="navbar-item">NBHとは？</nuxt-link>
        <nuxt-link to="/contact" class="navbar-item">お問い合わせ</nuxt-link>
      </div>
    </div><!-- navbar-menu END -->
  </nav>
</template>
</code>

このNavbar.vueを、layouts/default.vue内に表示するようにします。

layouts/default.vue
(変更前)
{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190208-182646.png}}
(変更後)
{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190208-182944.png}}

{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190208-183008.png}}

===== ハンバーガーメニューをトグルさせる =====
横幅を狭くすると、画面右上にハンバーガーメニューが出てきますが、それをクリックしても何も起こりません。
isMenuActiveというプロパティとtoggleMenuというメソッドを定義して、ハンバーガーメニューをクリックすると、縦方向にリンクが表示されるようにします。

<code>
<template>
...
<div class="navbar-burger" data-target="navMenu" @click="toggleMenu" :class="{'is-active': isMenuActive}">
...
<div class="navbar-menu" id="navMenu" :class="{'is-active': isMenuActive}">
...
</template>

<script>
export default {
  data: () => {
    return {isMenuActive: false}
  },
  methods: {
    toggleMenu () {
      this.isMenuActive = !this.isMenuActive
    }
  }
}
</script>
</code>
{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190208-190151.png}}
{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190208-190240.png}}
  *これで、トグルするようにはなったのですが、リンク先の飛んでも、メニューが開いたままになってしまっています。
  *そこで、『ページ遷移』（=リンクがクリックされる）したときに、メニューが閉じる（isMenuActiveプロパティがfalseになる）ようなプログラムを実装します。
  *このときに、Vuexを用いると、コンポーネント間の"isMenuActive"の『バケツリレー』を回避することができます。

詳細はhttps://qiita.com/isamusuzuki/items/5ec800e423a3a56ef03d#nuxtjs%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E5%8B%95%E4%BD%9C%E3%82%92%E8%AA%BF%E3%81%B9%E3%82%8Bを読んだのですが、なかなか難しく、結論からいうと、今回と関係があるのは、以下の2つのようでした。
  *isMenuActiveの状態管理に、Vuexを使った方がよい
  *Nuxt.jsアプリでは、<nuxt-link>経由で特定のページに移動したとき、fetch()メソッドが呼び出される

===== Vuexストアを設定する =====
isMenuActiveプロパティの状態（trueかfalseか）を、Vuexストアで管理します（状態管理）。
Nuxt.jsには、デフォルトの状態でVuexが入っており、store/ディレクトリに、index.jsや、xxxx.jsを記載したりすることにより、Vuexのコードを記載します。
『クラシックモード』と、『モジュールモード』があるらしいです。

参考：https://ja.nuxtjs.org/guide/vuex-store/
{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190208-191155.png}}

store/index.js (新規作成)
<code>
import Vuex from 'vuex'

const store = () => new Vuex.Store({
  state: {
    isMenuActive: false
  },
  mutations: {
    toggleMenu (state) {
      state.isMenuActive = !state.isMenuActive
    },
    resetMenu (state) {
      state.isMenuActive = false
    }
  }
})

export default store
</code>
{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190208-191513.png}}
  *layouts/Navbar.vueを編集して、ハンバーガーメニューをクリックすると$storeのtoggleMenu関数を実行し、また、navbar-burgerとnavbar-menuの開閉状態をisMenuActiveプロパティで制御しておくようにします。
<code>
...
<div class="navbar-burger" data-target="navMenu" @click="$store.commit('toggleMenu')" :class="{'is-active': $store.state.isMenuActive}">
...
<div class="navbar-menu" id="navMenu" :class="{'is-active': $store.state.isMenuActive}">
...
</code>
{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190208-192256.png}}
  *VisualStudioCodeのターミナル画面で、一度、Ctrl+C => Y => Enterで、サーバを停止したのち、再度、<wrap hi>yarn run dev</wrap>を入力し、Nuxtサーバを再起動します。この時点では、まだ、ページ遷移してもトグルは閉じません。
{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190208-192825.png}}

===== ページ遷移したときにトグルが閉じるようにする =====

ページ遷移したとき、すなわち、新しいページが描画されてfetch()メソッドを呼び出されたときにトグルが閉じるように（isMenuActiveがfalseになるように）します。
具体的には、各pages/index.vue, about.vue, contact.vueの<script>内に、以下のコードを追加します。
<code>
<script>
export default {
  fetch({ store }) {
    store.commit("resetMenu");
  }
};
</script>
</code>
pages/index.vue
{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190208-193344.png}}
pages/about.vue
{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190208-193413.png}}
pages/contact.vue
{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190208-193438.png}}

今回は以上となります。

===== ソースコード =====
ソースコード
https://github.com/adash333/Nuxt-Bulma-Hamburger3

スクリーンショット
{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190208-195135.png}}

===== 今回写経させていただいたサイト =====
https://qiita.com/isamusuzuki/items/5ec800e423a3a56ef03d
{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190208-195326.png}}














===== リンク =====
目次：

前：[[17.nuxt.jsのvuexでパスワード制限:index.html|17.Nuxt.jsのvuexでパスワード制限]]

次：[[19.nuxt.jsで画像一覧アプリ:index.html|19.Nuxt.jsで画像一覧アプリ]]