potato4d / nuxt-beginners-guide Goto Github PK

P105の

[SAMPLE CODE] auth-cookie.js

は他のページの記述ルールに合わせるなら下記が良いのかと思いました。

[SMPLE CODE] middleware/auth-cookie.js

nuxt-blog-serviceのディレクトリをダウンロードし、そのままyarnしてFirebaseのURLも自分のものに変えて実行してみましたが、
ユーザー登録まではできても、ログイン後に下記のようなエラーが出てしまい、クッキーを削除するまで元の画面に戻れなくなってしまいます。
Firebaseの方にはusersのデータはきちんと記録されているようです。

users/<ユーザID>/postsが消える。

app/store/index.jsのactions

  async addLikeLogToUser({ commit }, { user, post }) {
    user.likes.push({
      created_at: moment().format(),
      user_id: user.id,
      post_id: post.id
    })
    const newUser = await this.$axios.$put(`/users/${user.id}.json`, user)
    commit('updateUser', { user: newUser })
  },
  async removeLikeLogToUser({ commit }, { user, post }) {
    user.likes = post.likes.filter(like => like.user_id !== user.id) || []
    const newUser = await this.$axios.$put(`/users/${user.id}.json`, user)
    commit('updateUser', { user: newUser })
  }

渡ってくるuserにpostsメンバが含まれておらず、これをPUTしているのが原因。

  async addLikeLogToUser({ commit }, { user, post }) {
    user.likes.push({
      created_at: moment().format(),
      user_id: user.id,
      post_id: post.id
    })
-   const newUser = await this.$axios.$put(`/users/${user.id}.json`, user)
+   const newUser = await this.$axios.$patch(`/users/${user.id}.json`, user)
    commit('updateUser', { user: newUser })
  },
  async removeLikeLogToUser({ commit }, { user, post }) {
    user.likes = post.likes.filter(like => like.user_id !== user.id) || []
-   const newUser = await this.$axios.$put(`/users/${user.id}.json`, user)
+   const newUser = await this.$axios.$patch(`/users/${user.id}.json`, user)
    commit('updateUser', { user: newUser })
  }

PUTをPATCHにすると消えなくなるが、対症療法的。
postsメンバを持たないuserがここに渡ってくるのがそもそもまずい

state.users[user.id] であるべき箇所が state.user[user.id] となっている。

P125のSAMPLE CODEのパスが「store/index.js」となっていますが、「store/posts.js」の誤りではないでしょうか。

P92のcreate-nuxt-appで出来上がった後のディレクトリ構造について
node_modulesディレクトリについて、package.jsonと同一の階層のままにするという記載がなかったため、app以下へ移動してしまいしばらくハマってしまいましたので、そういった記載があるとハマる人が少なくなって親切かと思いました。

nuxt-blog-serviceの「app\store\posts.js」のfetchPostsアクションメソッドですが、
ログインしたユーザーに投稿が存在しない場合、
const posts = await this.$axios.$get(/posts.json)
実行直後のpostsがnullになっているのではないでしょうか。
そのため、Object.entries(posts).reverse().forEach(・・・
のところでエラーが発生するのではないかと存じます。
投稿が0件の場合の対応が必要ではないでしょうか。

p.115に「かつ日付やユーザーが正しく表示されていると完成です」とあるが、投稿日時が表示時刻になってしまう。

p.111 で保存されるべきところ、保存されていない
created_at should be added to the payload before this post

P102のpages/index.vueのサンプルコードですが、
-------------ココカラ--------------------
this.$router.push('/posts/');
} catch() {
this.$notify.error({
title: 'アカウント作成失敗',
message: '既に登録されているか、不正なユーザーIDです',
position: 'bottom-right',
duration: 1000
});
-------------ココマデ--------------------
「} catch() {」は「} catch(e) {」のtypoではないでしょうか。

はじめまして。
こちらの書籍のkindle版でタイポを見つけたのでその連絡です。
mutationsの手前に「,」が抜けてました。
（githubのコードは問題なかったです）

ご確認よろしくお願いします。

What

p.179 のサンプルコードの中で modules が dules になっています。

catch(e) で console.error(e)するとこんなエラーが出ていました:

TypeError: Cannot read property '$route' of undefined
    at store.getters.posts/posts.find.p (pages/posts/_id.js:143:65)
    at Array.find (<anonymous>)
    at asyncData (pages/posts/_id.js:143:41)
    at process._tickCallback (internal/process/next_tick.js:68:7)

てことは、こうか

diff --git a/app/pages/posts/_id.vue b/app/pages/posts/_id.vue
index 61c1abf..6bca794 100644
--- a/app/pages/posts/_id.vue
+++ b/app/pages/posts/_id.vue
@@ -28,7 +28,7 @@ export default {
         }
         try {
             await store.dispatch('posts/fetchPost', { id })
-            if(!(store.getters['posts/posts'].find(p => p.id === this.$route.params.id))) {
+            if(!(store.getters['posts/posts'].find(p => p.id === route.params.id))) {
                 throw new Error('post not found')
             }
         } catch (e) {

4章のnuxt-blog-serviceでyarn generateすると次のようなエラーが吐かれてビルドに失敗する。

INFO Generating pages

× error GEN ERR /posts

TypeError: Cannot read property 'headers' of undefined
at module.exports.webpack_exports.default (app/middleware/auth-cookie.js:10:0)
at promisify (.nuxt/utils.js:230:0)
at middlewareSeries (.nuxt/utils.js:210:0)
at module.exports.webpack_exports.default (.nuxt/server.js:144:0)
at _tickCallback (internal/process/next_tick.js:43:7)
at listOnTimeout (timers.js:294:7)
at processTimers (timers.js:268:5)
× error GEN ERR /posts/new

TypeError: Cannot read property 'headers' of undefined
at module.exports.webpack_exports.default (app/middleware/auth-cookie.js:10:0)
at promisify (.nuxt/utils.js:230:0)
at middlewareSeries (.nuxt/utils.js:210:0)
at module.exports.webpack_exports.default (.nuxt/server.js:144:0)
at _tickCallback (internal/process/next_tick.js:43:7)
at listOnTimeout (timers.js:294:7)
at processTimers (timers.js:268:5)
× error GEN ERR /

TypeError: Cannot read property 'headers' of undefined
at module.exports.webpack_exports.default (app/middleware/auth-cookie.js:10:0)
at promisify (.nuxt/utils.js:230:0)
at middlewareSeries (.nuxt/utils.js:210:0)
at module.exports.webpack_exports.default (.nuxt/server.js:144:0)
Done in 37.98s.

p119~121のsample codeではfetchUserの際にユーザデータをとってこれない。
pages/users/_id.vueの

const {id} = route.params

の部分で{id}にはpost同様ランダムな英字がIDとして入るため、

export const actions = {
  async fetchUser({ commit }, { id }) {
    const user = await this.$axios.$get(`/users/${id}.json`)
    commit('addUser',{user})
  }
}

上記getの際にでエラーが起こると思うのですがどうでしょうか？