designtopack/src/stores/projects.js

import { defineStore } from "pinia";
import { useApiStore } from "./api.js";
import { ref, computed } from "vue";

export const useProjectsStore = defineStore("projects", () => {
  const projects = ref([]);

  const currentProjects = computed(() => {
    return projects.value.filter((project) => project.status === "listed");
  });
  const archivedProjects = computed(() => {
    return projects.value.filter((project) => project.status === "unlisted");
  });

  const api = useApiStore();
  api
    .fetchData("projects")
    .then((json) => (projects.value = json.page.children));

  return { projects, currentProjects, archivedProjects };
});