After successfully logging in with the Prime Vue template, I have stored the user data in an object variable. Now, I need to access this user data on the profile page without importing a component. Can someone guide me on how to achieve this?
Below are the code snippets from my profile page:
<script setup>
import { computed, ref } from 'vue';
import { useRouter } from 'vue-router';
import { useLayout } from '@/layout/composables/layout';
import axios from 'axios';
let user = ref({});
const router = useRouter();
const rememberMe = ref(false);
const { layoutConfig } = useLayout();
const e_mail = ref("");
const pass = ref("");
const userData = computed(() => {
return user;
});
</script>
<template>
<div class="px-5 min-h-screen flex justify-content-center align-items-center">
<div class="border-1 surface-border surface-card border-round py-7 px-4 md:px-7 z-1">
<label for="">Username</label>
<span></span>
<label for="">E-Mail</label>
<span></span>
<label for="">Phone</label>
<span></span>
</div>
</div>
</template>
And these are the codes from my Login Page where I tried using emit function but encountered issues:
<script setup>
import { computed, ref } from 'vue';
import { useRouter } from 'vue-router';
import { useLayout } from '@/layout/composables/layout';
import axios from 'axios';
let user = ref({});
const router = useRouter();
const rememberMe = ref(false);
const { layoutConfig } = useLayout();
const e_mail = ref("");
const pass = ref("");
const navigateToDashboard = async () => {
axios.post("http://localhost:3000/api/user/login", {email: e_mail.value, password: pass.value})
.then(response => {
user = response.data.user;
console.log(user);
emit('userData', user);
router.push({ name: 'e-commerce' });
});
};
const userData = computed(() => {
return user;
});
</script>
<template>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 800" class="fixed left-0 top-0 min-h-screen min-w-screen" preserveAspectRatio="none">
<rect :fill="darkMode ? 'var(--primary-900)' : 'var(--primary-500)'" width="1600" height="800" />
<path
:fill="darkMode ? 'var(--primary-800)' : 'var(--primary-400)'"
d="M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5 ...
</path>
...
</svg>
<div class="px-5 min-h-screen flex justify-content-center align-items-center">
<div class="border-1 surface-border surface-card border-round py-7 px-4 md:px-7 z-1">
<div class="mb-4">
<div class="text-900 text-xl font-bold mb-2">Log in</div>
<span class="text-600 font-medium">Please enter your details</span>
</div>
...
</div>
</div>
</template>
If anyone has suggestions on passing data between pages without importing components, please share. Thank you.