Nuxt•6mo ago

access to something everywhere in the project

Hey, I'm using kinde for the authentification and i can access to the user with $auth.user. How can I make something like that? Thank for your help

3 Replies

Muhammad Mahmoud•6mo ago

That's global state you want. You can do that by using useState in a composable like this for example

// composables/useMyState.ts
export default function () {
  const state1 = useState(() => 1)
  const state2 = useState(() => ({ foo: bar }))

  return { state1, state2 }
}

// composables/useMyState.ts
export default function () {
  const state1 = useState(() => 1)
  const state2 = useState(() => ({ foo: bar }))

  return { state1, state2 }
}

Then use it anywhere in the app

// components/Test.vue
<script setup>
  const { state1, state2 } = useMyState()
  console.log(state1) // Read
  state1.value = 2 // Update
</script>

<template>
  <p> {{ state1 }} </p>
  <p> {{ state2 }} </p>
</template>

// components/Test.vue
<script setup>
  const { state1, state2 } = useMyState()
  console.log(state1) // Read
  state1.value = 2 // Update
</script>

<template>
  <p> {{ state1 }} </p>
  <p> {{ state2 }} </p>
</template>

I find useState is enough for me but you can also see Pinia for more complex state managment

Nocteln•6mo ago

ok thank you I'm trying to fetch data from my api but I got many errors . Can You help me please Here is my code :

// composables/user.ts
export const useUser = async () => {
  const tempUser = useAuth();
  let user;
  try {
    const { data } = await useFetch(`/api/auth/${tempUser.user?.id}`, {
      method: "POST",
      body: {
        user: tempUser.user,
      },
      headers: {
        "Content-Type": "application/json",
      },
    });
    user = data.value;
  } catch (e) {
    console.log(e);
  }
  return useState("foo", () => "cc");
};

// composables/user.ts
export const useUser = async () => {
  const tempUser = useAuth();
  let user;
  try {
    const { data } = await useFetch(`/api/auth/${tempUser.user?.id}`, {
      method: "POST",
      body: {
        user: tempUser.user,
      },
      headers: {
        "Content-Type": "application/json",
      },
    });
    user = data.value;
  } catch (e) {
    console.log(e);
  }
  return useState("foo", () => "cc");
};

// /api/users/[user].post.ts
import { prisma } from "../../../prisma/db";

export default defineEventHandler(async (event) => {
  console.log("cc");
  const { user: userInfo } = await readBody(event);

  if (!userInfo)
    return "error while fetching user : not user found ([user].post.ts]";
  let { email, id, name, picture, given_name } = userInfo;
  let newUser;

  if (picture === "" || picture === null)
    picture =
      "https://imebehavioralhealth.com/wp-content/uploads/2021/10/user-icon-placeholder-1.png";

  try {
    const user = await prisma.user.findMany({
      where: {
        kindeId: userInfo.id,
      },
    });

    if (user.length > 0) {
      return {
        user: user[0],
      };
    } else {
      newUser = await prisma.user.create({
        data: {
          email,
          kindeId: id,
          name,
          profilePicture: picture,
          pseudo: given_name,
        },
      });
    }

    return {
      user: newUser,
    };
  } catch (error) {
    console.error(error);
  }
});

// /api/users/[user].post.ts
import { prisma } from "../../../prisma/db";

export default defineEventHandler(async (event) => {
  console.log("cc");
  const { user: userInfo } = await readBody(event);

  if (!userInfo)
    return "error while fetching user : not user found ([user].post.ts]";
  let { email, id, name, picture, given_name } = userInfo;
  let newUser;

  if (picture === "" || picture === null)
    picture =
      "https://imebehavioralhealth.com/wp-content/uploads/2021/10/user-icon-placeholder-1.png";

  try {
    const user = await prisma.user.findMany({
      where: {
        kindeId: userInfo.id,
      },
    });

    if (user.length > 0) {
      return {
        user: user[0],
      };
    } else {
      newUser = await prisma.user.create({
        data: {
          email,
          kindeId: id,
          name,
          profilePicture: picture,
          pseudo: given_name,
        },
      });
    }

    return {
      user: newUser,
    };
  } catch (error) {
    console.error(error);
  }
});

Nocteln•6mo ago

and the errors

Gaming

Programming

access to something everywhere in the project