差分

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

--- z_blog:2018:181201_nuxt_bulma_responsive [2018/12/02] – [リンク] adash333
+++ z_blog:2018:181201_nuxt_bulma_responsive [2018/12/02] (現在) – [ソースコード] adash333
@@ 行 222: / 行 222: @@
 components/Navbar.vue
+<div class="navbar-burger">を、以下のように変更
-<div class="navbar-burger">を、
 <code>
 //変更前
- :class="{'is-active': isMenuActive}>
+@click="toggleMenu" :class="{'is-active': isMenuActive}"
+//変更後
+@click="$store.commit('toggleMenu')" :class="{'is-active': $store.state.isMenuActive}"
+</code>
+<div class="navbar-menu">を、以下のように変更
+<code>
+//変更前
+:class="{'is-active': isMenuActive}"
 //変更後
+:class="{'is-active': $store.state.isMenuActive}"
+</code>
+Vuexの構造についての絵を、以下に貼り付けておく。
+https://vuex.vuejs.org/ja/
+{{:z_blog:2018:pasted:20181202-143811.png}}
+データの流れが、Vue Components => Actions => Mutations => State => Vue Components　というように一方向らしい。。。
+<nuxt-link>経由で特定のページに移動したときのNuxt.jsアプリの動作として、<wrap hi>fetch()メソッドを呼び出す。</wrap>というものがあるとのことなので、indexページ、aboutページ、contactページの<script>のところに、以下のコードを追加する。
 <code>
+<script>
+export default {
+  fetch ({store}) {
+    store.commit('resetMenu')
+  }
+}
+</script>
+</code>
+pages/index.vue (変更後)
+{{:z_blog:2018:pasted:20181202-145003.png}}
+pages/about.vue (変更後)
+{{:z_blog:2018:pasted:20181202-145145.png}}
+あれ？store is not defined　というNuxt.jsのエラーが出てしまった。
+<script>のところのfetch ({store}) {　を、fetch ({state}) { とタイプミスをしていました。しばらく分からなかった。。。
+エラーもなかなか見つけにくい。。。（Ionic(Angular)のときは、ChromeでCtrl+Shift+Iでconsole logを見ると、どのファイルの何行目にどのようなエラーがありそうか、けっこう教えてくれる感じであった。）
+{{:z_blog:2018:pasted:20181202-145609.png}}
+pages/contact.vue (変更後)
+{{:z_blog:2018:pasted:20181202-145830.png}}
+まだ行がずれていてかっこ悪いが、これで、なんとか、ハンバーガーメニューが実装できた。
+しかし、ハンバーガーメニューの3本線を「メニュー」という文字にしたり、ボタンにしたりしようとすると、なんだかデザイン的に自分の思うように変更できない。。。
+===== NuxtサイトをNetlifyにデプロイ =====
+公式サイトに書いてあった。
+https://ja.nuxtjs.org/faq/netlify-deployment/
+{{:z_blog:2018:pasted:20181202-151748.png}}
+Netlifyでの画面はこんな感じ。
+{{:z_blog:2018:pasted:20181202-151817.png}}
+デプロイ後のサイト
+https://stoic-wescoff-381f9f.netlify.com/
+===== ソースコード =====
+https://github.com/adash333/nuxt2-bulma-hamburger
+===== Navbar-brandをNavbar-blandとタイプミスしていた =====
+ハンバーガーメニューがずれていたので、何がおかしいのかずっと分からなかったが、Navbar-brandのタイプミスであった。
+VisualStudioCodeの拡張機能で、Bulmaのタイプミスを指摘してくれるものはないかな？？？
+components/Navbar.vue
+(変更前)
+{{:z_blog:2018:pasted:20181202-161903.png}}
+(変更後)
+{{:z_blog:2018:pasted:20181202-161950.png}}
+これでやっと写経できた。
-===== リンク =====
 ===== Nuxt.jsでお勧めの本(2018年現在) =====