差分

このページの2つのバージョン間の差分を表示します。

--- 18.nuxt.jsとbulmaでハンバーガーメニュー:index.html [2019/02/08] – [ナビゲーションバーのコンポーネントを作成する] adash333
+++ 18.nuxt.jsとbulmaでハンバーガーメニュー:index.html [2019/02/09] (現在) – [初めてのVuex目次] adash333
@@ 行 15: / 行 15: @@
 [[18.nuxt.jsとbulmaでハンバーガーメニュー:index.html|18.Nuxt.jsとBulmaでハンバーガーメニュー]]
+[[19.nuxt.jsで画像一覧アプリ:index.html|19.Nuxt.jsで画像一覧アプリ]]
 ===== すること =====
@@ 行 22: / 行 26: @@
 ソースコード
+https://github.com/adash333/Nuxt-Bulma-Hamburger3
+スクリーンショット
+{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190208-195135.png}}
-Demo
 ===== 開発環境 =====
@@ 行 165: / 行 169: @@
   *このときに、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を読んだのですが、なかなか難しく、とにかく、Vuexを使った方がよいということらしいです。
+詳細は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ストアを設定する =====
@@ 行 195: / 行 201: @@
 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}}
@@ 行 219: / 行 263: @@
 目次：
-前：
+前：[[17.nuxt.jsのvuexでパスワード制限:index.html|17.Nuxt.jsのvuexでパスワード制限]]
-次：
+次：[[19.nuxt.jsで画像一覧アプリ:index.html|19.Nuxt.jsで画像一覧アプリ]]