TWSNMP FC: NuxtのWebアプリケーションからGO言語のサーバー側APIとデータをやりとりする

今朝もいつものように４時に猫に起こしてもらいました。昨日、ログインの仕組みまではできました。マップやグラフの表示など楽しい部分の開発はまだ先です。今日はGO言語のサーバー側のAPIにアクセスしてデータを取得する方法で悩んで４時間経ってしまいました。ネットにはNuxt.jsのデータの扱いに関していろいろ記事がありますが、沢山ありすぎてTWSNMP　FCに使うためによい方法はどれか迷ってしまいました。TWSNMP　FCの各画面の動作としては画面を表示した時にデータを取得して表示できればよいのでVuexのストアに保存する必要はないと考えてました。しかし、読み込み中となどは表示できたほうがよいと思いました。その結果、公式ページの解説にあるfetch

fetch メソッド

を使うことにしました。このページの解説よりもEXAMLESのリンクにある

fetch Hook

のほうが参考になりました。実際の使い方のソースコードが載っていて、ほぼそのまま移植できます。一定時間はデータの取得を控える方法も使えそうです。
まずは、試験的にマップの名前を取得して設定する画面を作ってみることにしました。
今日、作った部分は、

のような感じです。
まだ、途中なのでGitにコミットしていませんがソースコードは

<template>
 <v-card v-if="$fetchState.pending" max-width="500" class="mx-auto">
   <v-alert type="info">
     読み込み中.....
     <v-progress-circular indeterminate color="primary"></v-progress-circular>
   </v-alert>
 </v-card>
 <v-card v-else-if="$fetchState.error" max-width="500" class="mx-auto">
   <v-alert type="error"> マップ設定を取得できません </v-alert>
   <button @click="$fetch">再試行</button>
 </v-card>
 <v-card v-else max-width="500" class="mx-auto">
   <v-alert :value="error" type="error">
     マップ設定の保存に失敗しました
   </v-alert>
   <v-card-title primary-title>
     <h3 class="headline mb-0">マップ設定</h3>
   </v-card-title>
   <v-card-text>
     <v-form>
       <v-text-field v-model="me.userid" label="名前" required />
       <v-btn color="primary" dark @click="submit"> 保存 </v-btn>
     </v-form>
   </v-card-text>
 </v-card>
</template>

<script>
export default {
 async fetch() {
   this.me = await this.$axios.$get('/api/me')
 },
 data() {
   return {
     me: {},
     error: false,
   }
 },
 activated() {
   if (this.$fetchState.timestamp <= Date.now() - 30000) {
     this.$fetch()
   }
 },
 methods: {
   async submit() {
     const r = await this.$axios.post('/api/me', this.me).catch((e) => {
       this.error = true
     })
     console.log(r)
   },
 },
}
</script>

のような感じです。データの取得に関して基本的なことが分かったのであとは、同じ方法で作れそうです。少しだけNuxtに詳しくなってきました。
明日に続く