- WebサービスのフロントでNuxtjs(v2.14)を使った。
- 複数のlayoutを使い分ける必要があったため、ファイルを作成し、pageファイル内で指定した。
- page内で、マウント時に外部サービスへデータをpost(記録)する処理を書いた。
- 公開はnuxt generateで静的なサイトを作成し、それをアップした。
- 実際に公開ページにアクセスして処理を走らせてみる
- **外部サービスのログを見ると、データが2回処理されている？？？**←問題発覚
- PC、android端末では同様の現象は起きていなかった。
より細かく動作を見ていくと、
iPhone端末のsafariで
Nuxtjsのライフサイクルが二周している。
Nuxtjsのgithubを見ると過去に似たような問題が挙がっていた。
https://github.com/nuxt/nuxt.js/issues/5703
記事中であるように、
「this.$nuxt.layoutName」が一旦defaultで表示されたのち、
指定したものに切り替わっていた。
試しにレイアウトの指定を解除、
または指定をdefaultにすると、問題は起きなくなった。
また、記事中にある「window.〇〇」に処理の経過を記録するやり方の流用で
非同期でのデータ取得をstoreに移し、
データ取得処理の進行状態をstateで記録するようにすると、
二回目の取得処理を回避できるため、
当面の問題(二重記録)はクリアできた。
（uglyな手法って書かれてるけど）
割とぶつかりそうなネタだけど、Qiitaで見当たらなかったので初投稿テストです。