ぬるさくapi連携（失敗）

konno kiyotaka

前回からの続き

ぬるさく画面に再チャレンジ

固定値による画面表示はできたので、実際にapiからデータを取得しようとしました。しましたが、ハードル上げすぎて失敗したので、一旦ハードルを下げようと思いますが、まず失敗の記録をしておきます。

ページ、および、それに伴うストア等の分割

やろうとしていることは、

Pagesの中に、boookフォルダと、todoフォルダを作って、それぞれのアプリを作った状態で、さらに、wineフォルダを作って、その中でぬるさく本のアプリを作ろうということです。

pages
|--Lauter
|  |--index.vue
|--README.md
|--book
|  |--books
|  |  |--_id.vue
|  |--index.vue
|--index.vue
|--login.vue
|--todo
|  |--index.vue
|--wine
|  |--index.vue
|  |--result.vue

store
|--README.md
|--book.ts
|--counter.ts
|--index.ts
|--modules
|  |--todoTypes.ts
|  |--todos.ts
|  |--userTypes.ts
|  |--users.ts
|--root.ts
|--todo.ts
|--wine.ts

ただ、すでに作成しているtodoは一部きれいに分けきれずに、indexの中にtodo固有のものが残ってしまっています。

また、wineについても、本の説明は、indexとして作っているサンプルがベースなので、まあ色々ハマりました。
本の該当箇所は、「4.7 API に投げるために Vuex を実装しよう」のあたりです。やりたいのは、「v-for=”i in 11″」を「-for=”wineAttr in wineAttributes”」にする、ということです。

apiについては、「http://0.0.0.0:5432/api/wine_attributes」が動いているのが前提です。

最初はこの辺のエラー対応です。

commons.app.js:21599 [vuex] unknown getter: GET_WINE_ATTR

const gettersはexport const gettersにしないといけないのではないでしょうか。actionsも。自信はないですが、これにより呼ばれるようにはなりました。

また、本では触れられていませんが、githubのソースでは、index.d.ts で@nuxtjs/axios の記述があります。しかしそれをやると、

Error: Cannot find module '@nuxtjs/axios'

のエラーになります。@nuxtjs/pwa も同様なので、

yarn add @nuxtjs/axios       
yarn add @nuxtjs/pwa

で対応します。

nuxtServerInit

nuxtServerInitには苦労しました。console.log(“do nuxtServerInit”);を入れて、呼び出されていないことを確認しますが、何やってもダメです。

いったんnuxtServerInitを諦めて、getterの中で取得しようと思いましたが、そそれもうまくいかず。nuxtServerInit はindexでしか動かないという情報を見て、そうなんだ、と思いつつ（後から冷静に考えれば、init があちこちにあって良いわけがない）対応しましたが、だめ。

結論としては、nuxtServerInitは使えない状態になっていました。spaだから？
そういう情報はいくつか見てはいたのですが、なんとなく違うかなと思い込んでいました。いけません。

対応としては、plugin からactionを呼び出すという形です。

https://increment-log.com/nuxt-js-spa-nuxt-client-init/

今度こそOKだろうと思いましたが、まだだめ。
まず、

connect ECONNREFUSED 0.0.0.0:5432

が出てますが、これが出てても値は取得できているという謎な状態。
結局、wineの方のストアのstateに値をセットしたいのですが、そちらを見にいけていないようです。なので、もう分割にこだわらず、stateをindexの方に書こうと思ったのですが、indexにはその他用のstateもあるので、それとの区別が必要だしなどなど考えていると、全く進んでいない。

もう少しハマり数が少なければ、ハマりポイントの詳細もかけるのですが、次々ハマっていくのでメモしきれません。情けない・・・

そこで、次は、もう一度ぬるさく単体でアプリとして動かすことを目指してみます。

アーカイブ