Web Design Leaves

<script setup>
// リンクのコンポーネント RouterLink をインポート
import { RouterLink } from 'vue-router'
// ref メソッドをインポート
import { ref } from 'vue'

// 全ての投稿を保持する配列
const posts = ref([])
// ローディングの状態を表す真偽値
const loading = ref(false)
// エラーが有った場合にエラーを保持
const error = ref(null)

// 全ての投稿を取得する非同期関数
const fetchPosts = async () => {
  // posts を初期化
  posts.value = []
  // loading を true に変更
  loading.value = true
  try {
    // JSONPlaceholder から fetch() を使って全ての投稿のリソースを取得
    posts.value = await fetch('https://jsonplaceholder.typicode.com/posts')
    .then((response) => response.json())
  } catch (error) {
    // エラーがあれば、error プロパティに代入
    error.value = error
  } finally {
    // loading を false に戻す（ロード完了）
    loading.value = false
  }
}

// 全ての投稿のデータを取得
fetchPosts()
</script>

<template>
  <main>
    <!-- loading が true であればロード中であることを表すメッセージを表示-->
    <p v-if="loading">Loading posts...</p>
    <!--  error が true であればエラーメッセージを表示 -->
    <p v-if="error">{{ error.message }}</p>
    <!-- 投稿を取得できたら、それぞれの投稿をループしてタイトルと本文を表示 -->
    <div v-if="posts" v-for="post in posts" :key="post.id">
      <!-- RouterLink で個々の投稿へのリンクを設定 -->
      <RouterLink :to="`/post/${post.id}`">{{ post.title }}</RouterLink>
      <p>{{ post.body }}</p>
    </div>
  </main>
</template>

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    //home のルート（route）
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    //about のルート（route）
    {
      path: '/about',
      name: 'about',
      // route level code-splitting （サンプルに記載されているコメント→削除）
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('../views/AboutView.vue')
    },
    //投稿のリストへのルート（route）を追加
    {
      path: '/posts',
      name: 'posts',
      // 動的にコンポーネントをインポート（route level code-splitting）
      component: () => import('../views/PostListView.vue')
    },
  ]
})

export default router

<script setup>
import { RouterLink, RouterView } from 'vue-router'
</script>

<template>
  <nav>
    <ul>
      <li>
        <RouterLink to="/">Home</RouterLink>
      </li>
      <li>
        <RouterLink to="/about">About</RouterLink>
      </li>
      <!-- 以下のリンクを追加 -->
      <li>
        <RouterLink to="/posts">Posts</RouterLink>
      </li>
    </ul>
  </nav>
  <RouterView />
</template>

<style scoped>
/* 省略 */
</style>

<RouterLink :to="{ name: 'posts' }">Posts</RouterLink>

<script setup>
import { RouterLink } from 'vue-router'
import { ref } from 'vue'

// 全てのユーザーを保持する配列
const users = ref([])
const loading = ref(false)
const error = ref(null)

// 全てのユーザーを取得する非同期関数
const fetchUsers = async () => {
  users.value = []
  loading.value = true
  try {
    // 全てのユーザーを取得
    users.value = await fetch('https://jsonplaceholder.typicode.com/users')
    .then((response) => response.json())
  } catch (error) {
    error.value = error
  } finally {
    loading.value = false
  }
}

// 全てのユーザーのデータを取得
fetchUsers()
</script>

<template>
  <main>
    <p v-if="loading">Loading posts...</p>
    <p v-if="error">{{ error.message }}</p>
    <!-- users が取得できれば（fetch が成功したら） -->
    <div v-if="users" v-for="user in users" :key="user.id">
      <!-- RouterLink で個々のユーザーページへのリンクを出力 -->
      <RouterLink :to="`/user/${user.id}`">{{ user.name }}</RouterLink>
    </div>
  </main>
</template>

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/AboutView.vue')
    },
    {
      path: '/posts',
      name: 'posts',
      component: () => import('../views/PostListView.vue')
    },
    //ユーザーのリスト画面へのルート（route）を追加
    {
      path: '/users',
      name: 'users',
      component: () => import('../views/UserListView.vue')
    },
  ]
})

export default router

<script setup>
import { RouterLink, RouterView } from 'vue-router'
</script>

<template>
  <nav>
    <ul>
      <li>
        <RouterLink to="/">Home</RouterLink>
      </li>
      <li>
        <RouterLink to="/about">About</RouterLink>
      </li>
      <li>
        <RouterLink to="/posts">Posts</RouterLink>
      </li>
      <!-- 以下のリンクを追加 -->
      <li>
        <RouterLink to="/users">Users</RouterLink>
      </li>
    </ul>
  </nav>
  <RouterView />
</template>

<style scoped>
/* 省略 */
</style>

<script setup>
// ref と computed メソッドをインポート
import { ref, computed } from 'vue'

// コメント
const comments = ref([])
const loading = ref(false)
const error = ref(null)

//コメントの数（算出プロパティ）
const commentsLength = computed(() => {
  return comments.value.length
});

//PostSingleView.vue（親コンポーネント）から投稿の id を受け取る props
const props = defineProps({
  postId : {
    type: String,
  }
});
//または const props = defineProps(['postId'])

//現在表示されている投稿のコメントを取得する関数
const fetchPostComments = async () => {
  comments.value = []
  loading.value = true
  try {
    // 投稿の id を使って現在の投稿のコメントを取得（引数の URL はバッククォートで囲む）
    comments.value = await fetch(`https://jsonplaceholder.typicode.com/posts/${props.postId}/comments`)
    .then((response) => response.json())
  } catch (error) {
    error.value = error
  } finally {
    loading.value = false
  }
}

//コメントを取得
fetchPostComments()
</script>

<template>
  <div>
    <p v-if="loading">Loading comments...</p>
    <p v-if="error">{{ error.message }}</p>
    <!-- comments が取得できれば（fetch が成功したら）-->
    <h3 v-if="comments">{{ commentsLength }} Comments: </h3>
    <div v-if="comments" v-for="comment in comments" :key="comment.id">
      <h3>{{ comment.name }}</h3>
      <p>{{ comment.body }}</p>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { RouterLink } from 'vue-router'

const user = ref(null)
const loading = ref(false)
const error = ref(null)
//userID を props で PostSingleView.vue から受け取る
const props = defineProps({
  userId : {
    type: Number,
  }
});

//ユーザーを取得する関数
const fetchPostUser = async () => {
  user.value = null
  loading.value = true
  try {
    // userId で指定したユーザーを取得（引数の URL はバッククォートで囲む）
    user.value = await fetch(`https://jsonplaceholder.typicode.com/users/${props.userId}`)
    .then((response) => response.json())
  } catch (error) {
    error.value = error
  } finally {
    loading.value = false
  }
}

//ユーザーを取得
fetchPostUser()
</script>

<template>
  <div>
    <p v-if="loading">Loading user...</p>
    <p v-if="error">{{ error.message }}</p>
    <!-- user が取得できれば（fetch が成功したら） -->
    <p v-if="user">Written by :
      <RouterLink :to="`/user/${user.id}`">{{ user.name }}</RouterLink>
    </p>
  </div>
</template>

<script setup>
import { ref } from 'vue'
//コメントのコンポーネントをインポート
import PostComments from '../components/PostComments.vue'
//ユーザー名のコンポーネントをインポート
import PostUser from '../components/PostUser.vue'
//ルーターから useRoute をインポート
import { useRoute } from 'vue-router'
//現在のルート（route オブジェクト）を取得
const route = useRoute()

//投稿のデータ
const post = ref(null)
const loading = ref(false)
const error = ref(null)

//投稿のデータを取得する非同期関数
const fetchPost = async (id) => {
  / post を初期化
  post.value = null
  loading.value = true
  try {
    // 指定した id の投稿を取得（引数の URL はバッククォートで囲む）
    post.value = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`)
    .then((response) => response.json())
  } catch (error) {
    error.value = error
  } finally {
    loading.value = false
  }
}

// ルートのパラメータ（投稿の id）を引数に指定して投稿を取得
fetchPost(route.params.id)
</script>

<template>
  <div>
    <p v-if="loading">Loading post...</p>
    <p v-if="error">{{ error.message }}</p>
    <!-- post が取得できれば（fetch が成功したら） -->
    <div v-if="post">
      <h2>{{ post.title }}</h2>
      <p>{{ post.body }}</p>
      <!-- props（カスタム属性）で投稿のユーザーID（post.userId）を渡す -->
      <PostUser :user-id="post.userId" />
    </div>
    <hr>
    <!-- props（カスタム属性）で投稿のID（route.params.id）を渡す -->
    <PostComments :post-id="route.params.id" />
  </div>
</template>

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/AboutView.vue')
    },
    {
      path: '/posts',
      name: 'posts',
      component: () => import('../views/PostListView.vue')
    },
    {
      path: '/users',
      name: 'users',
      component: () => import('../views/UserListView.vue')
    },
    //個別投稿画面へのルート（route）を追加
    {
      path: '/post/:id',
      name: 'post',
      component: () => import('../views/PostSingleView.vue')
    },
  ]
})

export default router

<script setup>
// ref メソッドをインポート
import { ref, computed } from 'vue'
import { RouterLink } from 'vue-router'

const userPosts = ref([])
const loading = ref(false)
const error = ref(null)

//userID を props で PostSingleView.vue から受け取る
const props = defineProps(['userId'])

//ユーザーの投稿の数（算出プロパティ）
const userPostsLength = computed(() => {
  return userPosts.value.length
});

//ユーザーの投稿を取得する関数
const fetchUserPosts = async () => {
  userPosts.value = []
  loading.value = true
  try {
    // 一度全ての投稿を取得
    userPosts.value = await fetch(`https://jsonplaceholder.typicode.com/posts/`)
    .then((response) => response.json())
    //取得した投稿の中で現在のユーザーの投稿をフィルタ
    userPosts.value = userPosts.value.filter((post) => post.userId === parseInt(props.userId))
  } catch (error) {
    error.value = error
  } finally {
    loading.value = false
  }
}

//ユーザーの投稿を取得
fetchUserPosts()
</script>

<template>
  <div>
    <p v-if="loading">Loading posts...</p>
    <p v-if="error">{{ error.message }}</p>
    <!-- userPosts が取得できれば（fetch が成功したら） -->
    <p v-if="userPosts">{{ userPostsLength }} posts written.</p>
    <div v-if="userPosts" v-for="post in userPosts" :key="post.id">
      <RouterLink :to="`/post/${post.id}`">{{ post.title }}</RouterLink>
    </div>
  </div>
</template>

<script setup>
// ref メソッドをインポート
import { ref } from 'vue'
// UserPosts をインポート
import UserPosts from '../components/UserPosts.vue'
// ルーターから useRoute をインポート
import { useRoute } from 'vue-router'
// 現在のルート（route オブジェクト）を取得
const route = useRoute()

const user = ref(null)
const loading = ref(false)
const error = ref(null)

// ユーザーを取得する非同期関数
const fetchUser = async () => {
  user.value = null
  loading.value = true
  try {
    // ルートから取得した id を指定してユーザーを取得（引数の URL はバッククォートで囲む）
    user.value = await fetch(`https://jsonplaceholder.typicode.com/users/${route.params.uid}`)
    .then((response) => response.json())
  } catch (error) {
    error.value = error
  } finally {
    loading.value = false
  }
}

// ユーザーを取得
fetchUser()
</script>

<template>
  <div>
    <p v-if="loading">Loading user...</p>
    <p v-if="error">{{ error.message }}</p>
    <!-- user が取得できれば（fetch が成功したら）ユーザー名を出力 -->
    <h1 v-if="user">{{user.name}}</h1>
    <!-- カスタム属性（props）にユーザーIDを渡して UserPosts を呼び出す -->
    <UserPosts :user-id="route.params.uid"/>
  </div>
</template>

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/AboutView.vue')
    },
    {
      path: '/posts',
      name: 'posts',
      component: () => import('../views/PostListView.vue')
    },
    {
      path: '/users',
      name: 'users',
      component: () => import('../views/UserListView.vue')
    },
    {
      path: '/post/:id',
      name: 'post',
      component: () => import('../views/PostSingleView.vue')
    },
    //個別ユーザー画面へのルート（route）を追加
    {
      path: '/user/:uid',
      name: 'user',
      component: () => import('../views/UserSingleView.vue')
    },
  ]
})

export default router

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/AboutView.vue')
    },
    {
      path: '/posts',
      name: 'posts',
      component: () => import('../views/PostListView.vue')
    },
    {
      path: '/users',
      name: 'users',
      component: () => import('../views/UserListView.vue')
    },
    {
      path: '/post/:id',
      name: 'post',
      component: () => import('../views/PostSingleView.vue'),
      props: true  //props オプションを追加
    },
    {
      path: '/user/:uid',
      name: 'user',
      component: () => import('../views/UserSingleView.vue'),
      props: true  //props オプションを追加
    },
  ]
})

export default router

<script setup>
import { ref } from 'vue'
import PostComments from '../components/PostComments.vue'
import PostUser from '../components/PostUser.vue'

//props を定義
const props = defineProps(['id']);

const post = ref(null)
const loading = ref(false)
const error = ref(null)

const fetchPost = async (id) => {
  post.value = null
  loading.value = true
  try {
    post.value = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`)
    .then((response) => response.json())
  } catch (error) {
    error.value = error
  } finally {
    loading.value = false
  }
}

// props.id に変更
fetchPost(props.id)
</script>

<template>
  <div>
    <p v-if="loading">Loading post...</p>
    <p v-if="error">{{ error.message }}</p>
    <div v-if="post">
      <h2>{{ post.title }}</h2>
      <p>{{ post.body }}</p>
      <PostUser :user-id="post.userId" />
    </div>
    <hr>
    <!-- id に変更 -->
    <PostComments :post-id="id" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import UserPosts from '../components/UserPosts.vue'

//props を定義
const props = defineProps(['uid']);

const user = ref(null)
const loading = ref(false)
const error = ref(null)

const fetchUser = async () => {
  user.value = null
  loading.value = true
  try {
    // props.uid  に変更
    user.value = await fetch(`https://jsonplaceholder.typicode.com/users/${props.uid}`)
    .then((response) => response.json())
  } catch (error) {
    error.value = error
  } finally {
    loading.value = false
  }
}
fetchUser()
</script>

<template>
  <div>
    <p v-if="loading">Loading user...</p>
    <p v-if="error">{{ error.message }}</p>
    <h1 v-if="user">{{user.name}}</h1>
    <!-- uid に変更-->
    <UserPosts :user-id="uid"/>
  </div>
</template>

import { defineStore } from 'pinia'  //defineStore をインポート

//ストアを定義して名前（usePostStore）を付けてエクスポート
export const usePostStore = defineStore('post', {
  //state はデータの初期状態を返す関数として定義
  state: () => ({
    // 全ての投稿を保持する配列の初期値
    posts: [],
    //ローディングの状態の初期値
    loading: false,
    //エラーの初期値
    error: null
  }),

  //actions には state の値を更新する関数を定義
  actions: {
    //全ての投稿を取得する非同期関数（this を使うのでアロー関数は使えない）
    async fetchPosts() {
      //posts を初期化（ストアのインスタンスには this でアクセス）
      this.posts = []
      //loading を true に
      this.loading = true
      //JSONPlaceholder から fetch() を使って全ての投稿のリソースを取得
      try {
        this.posts = await fetch('https://jsonplaceholder.typicode.com/posts')
        .then((response) => response.json())
      } catch (error) {
        //エラーがあれば、error プロパティに代入
        this.error = error
      } finally {
        //loading を false に戻す（ロード完了）
        this.loading = false
      }
    },
  }
})

<script setup>
//定義したストア（の関数）をインポート
import { usePostStore } from '../stores/post'

//ストアの関数を実行して、戻り値のストアのインスタンスを変数に代入
const postStore = usePostStore()

//上記変数を介してストアのプロパティにアクセス
console.log(postStore.loading)
</script>

<script setup>
  import { RouterLink } from 'vue-router'
  import { storeToRefs } from 'pinia'   // storeToRefs メソッドをインポート
  import { usePostStore } from '../stores/post'  //ストアをインポート

  //storeToRefs メソッドを使って state プロパティを分割代入
  const { posts, loading, error } = storeToRefs(usePostStore())
  //actions は直接分割代入することが可能
  const { fetchPosts } = usePostStore()
  // 全ての投稿を取得
  fetchPosts()
</script>

<template>
  <main>
    <!-- loading が true であればロード中であることを表すメッセージを表示-->
    <p v-if="loading">Loading posts...</p>
    <!--  error が true であればエラーメッセージを表示 -->
    <p v-if="error">{{ error.message }}</p>
    <!-- 投稿を取得できたら、それぞれの投稿をループしてタイトルと本文を表示 -->
    <p v-if="posts" v-for="post in posts" :key="post.id">
      <!-- RouterLink で個々の投稿へのリンクを設定 -->
      <RouterLink :to="`/post/${post.id}`">{{ post.title }}</RouterLink>
      <p>{{ post.body }}</p>
    </p>
  </main>
</template>

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/AboutView.vue')
    },
    //投稿のリストへのルートを追加
    {
      path: '/posts',
      name: 'posts',
      // 動的にコンポーネントをインポート（route level code-splitting）
      component: () => import('../views/PostListView.vue')
    },
  ]
})

export default router

<script setup>
  import { RouterLink, RouterView } from 'vue-router'
  </script>

  <template>
    <nav>
      <ul>
        <li>
          <RouterLink to="/">Home</RouterLink>
        </li>
        <li>
          <RouterLink to="/about">About</RouterLink>
        </li>
        <!-- 以下のリンクを追加 -->
        <li>
          <RouterLink to="/posts">Posts</RouterLink>
        </li>
      </ul>
    </nav>
    <RouterView />
  </template>

  <style scoped>
  /* 省略 */
  </style>
  

import { defineStore } from 'pinia'  //defineStore をインポート

//ストアを定義して名前（useUserStore）を付けてエクスポート
export const useUserStore = defineStore('user', {
  state: () => ({
    // 全てのユーザーを保持する配列の初期値
    users: [],
    // ローディングの状態の初期値
    loading: false,
    // エラーの初期値
    error: null
  }),

  actions: {
    //全ての投稿を取得する非同期関数
    async fetchUsers() {
      this.users = []
      this.loading = true
      //JSONPlaceholder から fetch() を使って全てのユーザーのリソースを取得
      try {
        this.users = await fetch('https://jsonplaceholder.typicode.com/users')
        .then((response) => response.json())
      } catch (error) {
        this.error = error
      } finally {
        this.loading = false
      }
    },
  }
})

<script setup>
  import { RouterLink } from 'vue-router'
  import { storeToRefs } from 'pinia'
  import { useUserStore } from '../stores/user'

  // useUserStore から users, loading, error を取得
  const { users, loading, error } = storeToRefs(useUserStore())
  // useUserStore から fetchUsers を取得
  const { fetchUsers } = useUserStore()

  // 全てのユーザーのデータを取得
  fetchUsers()
</script>

<template>
  <main>
    <p v-if="loading">Loading users...</p>
    <p v-if="error">{{ error.message }}</p>
    <!-- ユーザーを取得できたら、それぞれのユーザーをループしてタイトルと本文を表示 -->
    <p v-if="users" v-for="user in users" :key="user.id">
      <!-- RouterLink で個々のユーザーへのリンク（/user/ユーザー名）を設定 -->
      <RouterLink :to="`/user/${user.username}`">{{ user.name }}</RouterLink>
    </p>
  </main>
</template>

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/AboutView.vue')
    },
    {
      path: '/posts',
      name: 'posts',
      component: () => import('../views/PostListView.vue')
    },
    //ユーザーのリスト画面へのルート（route）を追加
    {
      path: '/users',
      name: 'users',
      component: () => import('../views/UserListView.vue')
    },
  ]
})

export default router

<script setup>
import { RouterLink, RouterView } from 'vue-router'
</script>

<template>
<nav>
  <ul>
    <li>
      <RouterLink to="/">Home</RouterLink>
    </li>
    <li>
      <RouterLink to="/about">About</RouterLink>
    </li>
    <li>
      <RouterLink to="/posts">Posts</RouterLink>
    </li>
    <!-- 以下のリンクを追加 -->
    <li>
      <RouterLink to="/users">Users</RouterLink>
    </li>
  </ul>
</nav>
<RouterView />
</template>

<style scoped>
/* 省略 */
</style>

import { defineStore } from 'pinia'

export const usePostStore = defineStore('post', {
  state: () => ({
    posts: [],
    post: null, // *** 追加 *** 現在の投稿のデータの初期値
    loading: false,
    error: null
  }),

  actions: {
    async fetchPosts() {
      this.posts = []
      this.loading = true
      try {
        this.posts = await fetch('https://jsonplaceholder.typicode.com/posts')
        .then((response) => response.json())
      } catch (error) {
        this.error = error
      } finally {
        this.loading = false
      }
    },

    // *** 追加 ***
    async fetchPost(id) {
      //post を初期化。
      this.post = null
      this.loading = true
      try {
        //引数で指定した id の投稿を取得（引数の URL はバッククォートで囲む）
        this.post = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`)
        .then((response) => response.json())
      } catch (error) {
        this.error = error
      } finally {
        this.loading = false
      }
    },
  }
})

import { defineStore } from 'pinia'
//現在の投稿の ID を取得するために、投稿のストアをインポート（getPostComments で利用）
import { usePostStore } from './post'

export const useCommentStore = defineStore('comment',{
  state: () => ({
    //コメントの配列
    comments: [],
    loading: false,
    error: null
  }),
  getters: {
    //取得した全てのコメントで現在の投稿のコメントを取得
    getPostComments: (state) => {
      //投稿のストアのインスタンスを生成して、投稿の ID（postSore.post.id）を取得
      const postSore = usePostStore()
      //comments の各コメントの postId と投稿の ID が一致するものをフィルタして抽出
      return state.comments.filter((comment) => comment.postId === postSore.post.id)
    }
  },
  actions: {
    //全てのコメントを取得する非同期関数
    async fetchComments() {
      this.comments = []
      this.loading = true
      //JSONPlaceholder から fetch() を使って全てのコメントのリソースを取得
      try {
        this.comments = await fetch('https://jsonplaceholder.typicode.com/comments')
        .then((response) => response.json())
      } catch (error) {
        this.error = error
      } finally {
        this.loading = false
      }
    },
  }
})

<script setup>
import { useCommentStore } from '../stores/comment'
import { storeToRefs } from 'pinia'
const { loading, error } = storeToRefs(useCommentStore())
// props を宣言して親コンポーネントから comments を受け取る
defineProps(['comments'])
</script>

<template>
  <div>
    <p v-if="loading">Loading comments...</p>
    <p v-if="error">{{ error.message }}</p>
    <div v-if="comments" v-for="comment in comments" :key="comment.id">
      <h3>{{ comment.name }}</h3>
      <p>{{ comment.body }}</p>
    </div>
  </div>
</template>

import { defineStore } from 'pinia'
 //*** 追加 *** 現在の投稿の ID を取得するために、投稿のストアをインポート
import { usePostStore } from './post'

export const useUserStore = defineStore('user', {
  state: () => ({
    users: [],
    loading: false,
    error: null
  }),
  // *** 追加 ***
  getters: {
    //投稿の作者（ユーザー）を取得するゲッター
    getPostUser: (state) => {
      const postStore = usePostStore()
      return state.users.find((user) => user.id === postStore.post.userId)
    }
  },
  actions: {
    async fetchUsers() {
      this.users = []
      this.loading = true
      try {
        this.users = await fetch('https://jsonplaceholder.typicode.com/users')
        .then((response) => response.json())
      } catch (error) {
        this.error = error
      } finally {
        this.loading = false
      }
    },
  }
})

<script setup>
  import { RouterLink } from 'vue-router'
  import { storeToRefs } from 'pinia'
  import { useCommentStore } from '../stores/comment'
  import CommentList from '../components/CommentList.vue'

  // props を宣言して親コンポーネントから post と user を受け取る
  defineProps(['post', 'user'])
  // コメントのストアの現在の投稿のコメントを取得するゲッター
  const { getPostComments } = storeToRefs(useCommentStore())
  // コメントのストアのコメントを取得するアクション
  const { fetchComments } = useCommentStore()

  //getPostComments で取得するコメントが適切に更新されるようにコメントを取得
  fetchComments()
</script>

<template>
  <div>
    <div>
      <!-- 投稿のタイトルを出力 -->
      <h2>{{ post.title }}</h2>
      <!-- props の user（ユーザー）が取得できていれば -->
      <p v-if="user">Written by:
        <!-- ユーザー名にそのユーザーの個別ページのリンクを設定して出力 -->
        <RouterLink :to="`/user/${user.username}`">
          {{ user.name }}
        </RouterLink>
          <!-- getPostComments で取得したコメントを出力 -->
        | <span>Comments: {{ getPostComments.length }}</span>
      </p>
      <p>{{ post.body }}</p>
    </div>
    <hr>
    <h3>Comments:</h3>
    <!-- CommentList コンポーネントでコメントを出力 -->
    <!-- カスタム属性 comments で getPostComments で取得したコメントを props に渡す -->
    <CommentList :comments="getPostComments"></CommentList>
  </div>
</template>

<script setup>
  import { useRoute } from 'vue-router'
  import { storeToRefs } from 'pinia'
  import { useUserStore } from '../stores/user'
  import { usePostStore } from '../stores/post'
  import PostItem from '../components/PostItem.vue'
  //現在のルートを取得
  const route = useRoute()
  //ユーザーストアの投稿の作者（ユーザー）を取得するゲッター
  const { getPostUser } = storeToRefs(useUserStore())
  //ユーザーストアの全ユーザーを取得するアクション
  const { fetchUsers} = useUserStore()
  //投稿ストアの state
  const { post, loading, error } = storeToRefs(usePostStore())
  //投稿ストアの単一の投稿を取得するアクション
  const { fetchPost } = usePostStore()

  //全ユーザーを取得
  fetchUsers()
  //ルートのパラメータを指定してこのルートで表示する投稿を取得
  fetchPost(route.params.id)
</script>

<template>
  <div>
    <p v-if="loading">Loading post...</p>
    <p v-if="error">{{ error.message }}</p>
    <p v-if="post">
      <PostItem :post="post" :user="getPostUser"></PostItem>
    </p>
  </div>
</template>

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/AboutView.vue')
    },
    {
      path: '/posts',
      name: 'posts',
      component: () => import('../views/PostListView.vue')
    },
    {
      path: '/users',
      name: 'users',
      component: () => import('../views/UserListView.vue')
    },
    //個別投稿画面へのルート（route）を追加
    {
      path: '/post/:id',
      name: 'post',
      component: () => import('../views/PostSingleView.vue')
    },
  ]
})

export default router

<script setup>
import { useCommentStore } from '../stores/comment'
import { storeToRefs } from 'pinia'
// getPostComments を追加で分割代入
const { loading, error, getPostComments } = storeToRefs(useCommentStore())
//defineProps(['comments'])  //削除
</script>

<template>
  <div>
    <p v-if="loading">Loading comments...</p>
    <p v-if="error">{{ error.message }}</p>
    <!-- props の comments の代わりに getPostComments を使用 -->
    <div v-if="getPostComments" v-for="comment in getPostComments" :key="comment.id">
      <h3>{{ comment.name }}</h3>
      <p>{{ comment.body }}</p>
    </div>
  </div>
</template>

<script setup>
  import { RouterLink } from 'vue-router'
  import { storeToRefs } from 'pinia'
  import { useCommentStore } from '../stores/comment'
  import CommentList from '../components/CommentList.vue'

  //ユーザーと投稿のストアをインポート
  import { useUserStore } from '../stores/user'
  import { usePostStore } from '../stores/post'
  //ユーザーのストアから getPostUser を抽出
  const { getPostUser } = storeToRefs(useUserStore())
  //投稿のストアから post を抽出
  const { post } = storeToRefs(usePostStore())

  //defineProps(['post', 'user']) //削除

  const { getPostComments } = storeToRefs(useCommentStore())
  const { fetchComments } = useCommentStore()

  fetchComments()
</script>

<template>
  <div>
    <div>
      <h2>{{ post.title }}</h2>
      <!-- user の代わりに getPostUser を使用 -->
      <p v-if="getPostUser">Written by:
        <RouterLink :to="`/user/${getPostUser.username}`">
          {{ getPostUser.name }}
        </RouterLink>
        | <span>Comments: {{ getPostComments.length }}</span>
      </p>
      <p>{{ post.body }}</p>
    </div>
    <hr>
    <h3>Comments:</h3>
    <!-- 以下に変更 <CommentList :comments="getPostComments"></CommentList> -->
    <CommentList />
  </div>
</template>

<script setup>
  import { useRoute } from 'vue-router'
  import { storeToRefs } from 'pinia'
  import { useUserStore } from '../stores/user'
  import { usePostStore } from '../stores/post'
  import PostItem from '../components/PostItem.vue'
  const route = useRoute()
  //const { getPostUser } = storeToRefs(useUserStore())  //削除
  const { fetchUsers} = useUserStore()
  const { post, loading, error } = storeToRefs(usePostStore())
  const { fetchPost } = usePostStore()

  fetchUsers()
  fetchPost(route.params.id)
</script>

<template>
  <div>
    <p v-if="loading">Loading post...</p>
    <p v-if="error">{{ error.message }}</p>
    <p v-if="post">
      <!-- 以下に変更 <PostItem :post="post" :user="getPostUser"></PostItem> -->
      <PostItem />
    </p>
  </div>
</template>

import { defineStore } from 'pinia'

export const usePostStore = defineStore('post', {
  state: () => ({
    posts: [],
    post: null,
    loading: false,
    error: null
  }),

  //*** 追加 ***
  getters: {
    //ユーザーが作成した投稿を取得するゲッター
    getPostsPerUser: (state) => {
      //ゲッターは引数を受け取れないので、userId を引数に受け取る関数を返す
      return (userId) => state.posts.filter((post) => post.userId === userId)
    }
  },

  actions: {
    async fetchPosts() {
      this.posts = []
      this.loading = true
      try {
        this.posts = await fetch('https://jsonplaceholder.typicode.com/posts')
        .then((response) => response.json())
      } catch (error) {
        this.error = error
      } finally {
        this.loading = false
      }
    },

    async fetchPost(id) {
      this.post = null
      this.loading = true
      try {
        //引数の URL はバッククォートで囲む
        this.post = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`)
        .then((response) => response.json())
      } catch (error) {
        this.error = error
      } finally {
        this.loading = false
      }
    },
  }
})

<script setup>
  import { RouterLink } from 'vue-router'
  // props を宣言（親コンポーネントから user と posts を受け取る）
  defineProps(['user', 'posts'])
</script>

<template>
  <div>
    <h1>{{user.name}}</h1>
    <p>{{posts.length}} posts written.</p>
    <p v-for="post in posts" :key="post.id">
      <RouterLink :to="`/post/${post.id}`">{{ post.title }}</RouterLink>
    </p>
  </div>
</template>

<script setup>
  import { computed } from 'vue'
  import { useRoute } from 'vue-router'
  import { storeToRefs } from 'pinia'
  import { useUserStore } from '../stores/user'
  import { usePostStore } from '../stores/post'
  //ユーザーのコンポーネントをインポート
  import UserItem from '../components/UserItem.vue'

  //現在のルート（route オブジェクト）を取得
  const route = useRoute()
  //ユーザーのストアから users を抽出
  const { users } = storeToRefs(useUserStore())
  //投稿のストアから getPostsPerUser を抽出
  const { getPostsPerUser } = storeToRefs(usePostStore())
  //投稿のストアから fetchPosts を抽出
  const { fetchPosts } = usePostStore()
  //ユーザーのストアから fetchUsers を抽出
  const { fetchUsers } = useUserStore()

  //ルートのユーザー名からユーザーを取得する算出プロパティ
  const getUserByUserName = computed(() => {
    //全てのユーザーが取得できていれば
    if(users.value.length) {
      //全てのユーザーをフィルタして、ルートのユーザー名に一致するユーザーを抽出
      return users.value.find((user) => user.username === route.params.username)
    }else {
      //全てのユーザーが取得できていなければ、全てのユーザーを取得
      fetchUsers()
      return users.value.find((user) => user.username === route.params.username)
    }
  })

  //全ての投稿を取得（ユーザーが作成した投稿を取得するため）
  fetchPosts()
</script>

<template>
  <div>
    <!-- カスタム属性でユーザーのコンポーネントに user と posts を渡す -->
    <UserItem
      v-if="getUserByUserName"
      :user="getUserByUserName"
      :posts="getPostsPerUser(getUserByUserName.id)">
    </UserItem>
  </div>
</template>

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/AboutView.vue')
    },
    {
      path: '/posts',
      name: 'posts',
      component: () => import('../views/PostListView.vue')
    },
    {
      path: '/users',
      name: 'users',
      component: () => import('../views/UserListView.vue')
    },
    {
      path: '/post/:id',
      name: 'post',
      component: () => import('../views/PostSingleView.vue')
    },
    //個別ユーザー画面へのルート（route）を追加
    {
      path: '/user/:username',  // :username を指定
      name: 'user',
      component: () => import('../views/UserSingleView.vue')
    },
  ]
})

export default router

import { defineStore } from 'pinia'
import { usePostStore } from './post'

export const useUserStore = defineStore('user', {
  state: () => ({
    users: [],
    user: null,
    loading: false,
    error: null
  }),
  getters: {
    getPostUser: (state) => {
      const postStore = usePostStore()
      return state.users.find((user) => user.id === postStore.post.userId)
    },
    //*** 追加 ***
    getUserByUserName: (state) => {
      //引数 username を受け取る関数を返す
      return (username) => {
        return state.users.find((user) => user.username === username)
      }
    }
  },

  actions: {
    async fetchUsers() {
      this.users = []
      this.loading = true
      try {
        this.users = await fetch('https://jsonplaceholder.typicode.com/users')
        .then((response) => response.json())
      } catch (error) {
        this.error = error
      } finally {
        this.loading = false
      }
    },
  }
})

<script setup>
  //import { computed } from 'vue' //使わない
  import { useRoute } from 'vue-router'
  import { storeToRefs } from 'pinia'
  import { useUserStore } from '../stores/user'
  import { usePostStore } from '../stores/post'
  import UserItem from '../components/UserItem.vue'
  const route = useRoute()
  // getUserByUserName を抽出
  const { getUserByUserName, users } = storeToRefs(useUserStore())
  const { fetchPosts } = usePostStore()
  const { fetchUsers } = useUserStore()

  //ページを再読込した場合は、ユーザーを取得
  if(!users.value.length) {
    fetchUsers()
  }

  fetchPosts()
</script>

<template>
  <div>
    <UserItem v-if="getUserByUserName(route.params.username)"></UserItem>
  </div>
</template>

<script setup>
    import { RouterLink } from 'vue-router'
    // 以下を追加でインポート
    import { useRoute } from 'vue-router'
    import { storeToRefs } from 'pinia'
    import { usePostStore } from '../stores/post'
    import { useUserStore } from '../stores/user'
    import { ref } from 'vue'

    // ルートを取得
    const route = useRoute()
    // 投稿のストアから getPostsPerUser を抽出
    const { getPostsPerUser } = storeToRefs(usePostStore())
    // ユーザーのストアから getUserByUserName を抽出
    const { getUserByUserName } = storeToRefs(useUserStore())

    //defineProps(['user', 'posts']) //削除
  </script>

  <template>
    <div>
      <h1>{{ getUserByUserName(route.params.username).name }}</h1>
      <p>{{ getPostsPerUser(getUserByUserName(route.params.username).id).length }} posts written.</p>
      <p v-for="post in getPostsPerUser(getUserByUserName(route.params.username).id)" :key="post.id">
        <RouterLink :to="`/post/${post.id}`">{{ post.title }}</RouterLink>
      </p>
    </div>
  </template>

<script setup>
  import { RouterLink } from 'vue-router'
  import { useRoute } from 'vue-router'
  import { storeToRefs } from 'pinia'
  import { usePostStore } from '../stores/post'
  import { useUserStore } from '../stores/user'
  import { ref } from 'vue'

  const route = useRoute()
  const { getPostsPerUser } = storeToRefs(usePostStore())
  const { getUserByUserName } = storeToRefs(useUserStore())

  // user を変数に代入
  const user = ref(getUserByUserName.value(route.params.username))
  //以下は期待通りに動作しない
  //const posts = ref(getPostsPerUser.value(user.id))

</script>

<template>
  <div>
    <h1>{{ user.name }}</h1>
    <!-- posts は getPostsPerUser(user.id) で取得 -->
    <p>{{ getPostsPerUser(user.id).length }} posts written.</p>
    <p v-for="post in getPostsPerUser(user.id)" :key="post.id">
      <RouterLink :to="`/post/${post.id}`">{{ post.title }}</RouterLink>
    </p>
  </div>
</template>