如何在.vue文件之间传递数据

syqv5f0l  于 2023-06-24  发布在  Vue.js
关注(0)|答案(1)|浏览(157)

我使用的是Prime Vue模板,我创建了登录页面。我可以在登录时获取用户值,并将此数据推送到对象变量中。现在我想在个人资料页面上使用此用户数据。我怎么能这样做没有进口组件。请帮帮忙
这是我的个人资料页面代码

<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>

这是我的登录页面代码,我试图在这里发出func,但它没有工作。所以我删了。实际上我想在没有导入组件的情况下传递数据,但我不能。谢谢你。

<script setup>
import { computed, ref } from 'vue';
import { useRouter } from 'vue-router';
import { useLayout } from '@/layout/composables/layout';
import AppConfig from '@/layout/AppConfig.vue';
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.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2
        478.4 581z"
        />
        <path
            :fill="darkMode ? 'var(--primary-700)' : 'var(--primary-300)'"
            d="M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z"
        />
        <path
            :fill="darkMode ? 'var(--primary-600)' : 'var(--primary-200)'"
            d="M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z"
        />
        <path :fill="darkMode ? 'var(--primary-500)' : 'var(--primary-100)'" d="M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z" />
    </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 class="flex flex-column">
                <span class="p-input-icon-left w-full mb-4">
                    <i class="pi pi-envelope"></i>
                    <InputText v-model="e_mail" id="email" type="text" class="w-full md:w-25rem" placeholder="Email" />
                </span>
                <span class="p-input-icon-left w-full mb-4">
                    <i class="pi pi-lock"></i>
                    <InputText v-model="pass" id="password" type="password" class="w-full md:w-25rem" placeholder="Password" />
                </span>
                <div class="mb-4 flex flex-wrap gap-3">
                    <div>
                        <Checkbox name="checkbox" v-model="rememberMe" binary class="mr-2"></Checkbox>
                        <label htmlFor="checkbox" class="text-900 font-medium mr-8"> Remember Me </label>
                    </div>
                    <a class="text-600 cursor-pointer hover:text-primary cursor-pointer ml-auto transition-colors transition-duration-300">Reset password</a>
                </div>
                <Button label="Log In" class="w-full" @click="navigateToDashboard"></Button>
            </div>
        </div>
    </div>
    <AppConfig simple />
</template>
pgvzfuti

pgvzfuti1#

在多个ccomponent之间共享的所有数据,例如auth用户数据和网站设置,应该在vuex或pinia中,因为您需要在侧边栏- navbar -用户配置文件-网站设置中使用它
如果你打算共享所有这些组件,那将是糟糕的代码
您可以保存一些localStorage数据(如令牌),以便在重新加载页面时可以使用它再次获取数据

相关问题