// stores/users.js
import { defineStore } from 'pinia';
import { ref } from 'vue';

export const useUsersStore = defineStore('users', () => {
  const users = ref([]);
  const status = ref('idle'); // idle | loading | error | success

  async function fetchUsers() {
    status.value = 'loading';
    try {
      const res = await fetch('https://jsonplaceholder.typicode.com/users');
      if (!res.ok) throw new Error('Request failed');
      users.value = await res.json();
      status.value = 'success';
    } catch (e) {
      status.value = 'error';
    }
  }

  return { users, status, fetchUsers };
});


<!-- src/UserList.vue -->
<script setup>
import { onMounted } from 'vue';
import { storeToRefs } from 'pinia';
import { useUsersStore } from './stores/users';

const store = useUsersStore();
const { users, status } = storeToRefs(store);

onMounted(() => {
  store.fetchUsers();
});
</script>

<template>
  <p v-if="status === 'loading'">Loading...</p>
  <p v-else-if="status === 'error'">Something went wrong.</p>
  <ul v-else-if="status === 'success'">
    <li v-for="user in users" :key="user.id">{{ user.name }}</li>
  </ul>
</template>

<!--
  Notes:
  - The async action lives in the store, making it the natural home for
    the API call — exactly as a service was in Angular Chapter 11.
  - status drives the loading/error/success rendering, the same single-
    status pattern used across the React projects.
  - Because the fetched users live in the store, any OTHER component
    using this store sees the same data without re-fetching — the
    sharing benefit React Query provided in React Advanced Chapter 2.
  - storeToRefs keeps users/status reactive when destructured; the
    fetchUsers action is called off `store` directly in onMounted.
-->