مشکل در کد vue
<script setup>
import useThreadStore from "@/store/threads.js";
import { computed, onMounted } from "vue";
import PaginateComponent from "@/components/threads/PaginateComponent";
import ThreadCardComponent from "@/components/threads/CardComponent";
const threadStore = useThreadStore();
const threads = computed(() => threadStore.allThreads);
async function fetchThreads() {
await threadStore.fetchThreads("/threads");
}
onMounted(() => {
fetchThreads();
});
</script>
<template>
<div class="container mt-5 py-4">
<div
class="flex flex-wrap flex-row justify-center items-center"
v-if="threads.length"
>
<div class="p-4 basis-1/3" v-for="thread in threads" :key="thread.id">
<ThreadCardComponent :thread="thread" />
</div>
<PaginateComponent />
</div>
</div>
</template>
کد بالا صفحه ایندکس اصلی منه و با ران شدن پروژه بدون مشکل و ارور لود میشه اما اگه بین روت ها جا به جا شم و برگردم به همین صفحه از thread.length ایراد میگیره و میگه thread یک undefind هستش
<script setup>
import { defineProps, computed,onMounted } from "vue";
import useAnswersStore from "@/store/answers";
import AnswersCardComponent from "@/components/answers/CardComponent";
const props = defineProps(["slug"]);
const answersStore = useAnswersStore();
const answers = computed(() => answersStore.allAnswers);
onMounted(() => {
answersStore.fetchAnswers(`/threads/${props.slug}/answers`);
});
const loadNextAnswers = () => {
answersStore.fetchAnswers(answersStore.$state.next_page);
};
</script>
<template>
<div
v-for="answer in answers"
:key="answer.id"
class="flex flex-col p-4 border-2 rounded-xl my-2"
>
<AnswersCardComponent :answer="answer" />
</div>
<div class="flex flex-row flex-wrap justify-center my-4">
<button
v-if="answersStore.$state.next_page != null"
@click="loadNextAnswers"
class="p-2 bg-green-500"
>
Show more
</button>
</div>
</template>
این هم یک مورد دیگ هستش مثلا وقتی از صفحه ایندکس اصلی وارد اینجا میشم بهم ارور میده و میگه fetchAnswers یه تابع تعریف تشده است اما اگ همین رو رفرش کنم بدون مشکل لود میشه
گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
سلام رسول جان 🖐
امیدوارم حالت خوب و عالی باشی🙏
خبره که نیستم اما چیزکای بلدیم 😊
بنظرم مشکل توی زمانبندی بازیابی داده هاته درسته و وقتی بین صفحات میخری کامپوننت هات درست اجرا نمیشه
پیشنهاد من اینطوریه که بیشتر اگر از nuxt استفاده کنی و برای چرخه داده هات بری سمت asyncData | async/await کارت اسونتره عملا
- از Vue Router Navigation Guards برای میتونی برای پیش پردازش ها برای ورود به مسیر جدید استفاده کنی و این میتونه خوب و کارآمد تر باشه
بعنوان مثال میتونی از beforeRouteEnter یا beforeRouteUpdate استفاده کنی
مثال استفاده
export default {
beforeRouteEnter(to, from, next) {
fetchThreads().then(() => {
next();
});
},
};
حالا مشکل اساسی ترت رو وقتی که داری دیتا رو دریافت میکنی و احتمال میدی که لود نشه رو با این راه حل اوکی کنی :
استفاده از v-if برای بررسی وجود داده‌ها
در کدهات ، قبل از استفاده از threads.length، با استفاده از v-if بررسی کن که داده‌ها به درستی لود شدن یا خیر. این کار به شما اجازه می‌دهد تا فقط زمانی که داده‌ها به درستی لود شده‌اند، از آن‌ها استفاده کنی
<template>
<div class="container mt-5 py-4">
<div
class="flex flex-wrap flex-row justify-center items-center"
v-if="threads && threads.length"
>
<!-- ... -->
</div>
</div>
</template>
استفاده از Navigation Guards:
export default {
beforeRouteEnter(to, from, next) {
fetchThreads().then(() => {
next(vm => {
// داده‌ها با موفقیت لود شده و می‌توانید از آن‌ها استفاده کنید.
});
});
},
};
استفاده از v-slot در <template> بالا
میتونی مطمئن بشی که از v-slot در قالب‌های <template> مختلف استفادمیکنی تا داده‌ها به درستی منتقل میشن
<script setup>
// ...
</script>
<template>
<div class="container mt-5 py-4">
<div
class="flex flex-wrap flex-row justify-center items-center"
>
<div class="p-4 basis-1/3" v-for="thread in threads" :key="thread.id">
<ThreadCardComponent :thread="thread" />
</div>
<PaginateComponent />
</div>
</div>
</template>
امیدوارم پاسخم بهت کمک کرده باشه ❤️
موفق و پیروز باشی 🤘🌹
@mahdi.nazari
خیلی ممنون ازت مهدی جان
نوشته هات فک کنم تا حدی مشکلاتمو حل کنه
درباره nuxt هم قصدشو دارم اما فعلا میخام در Vue به تسلط کافی برسم و باهاش چند تا پروژه در حد قابل قبول شخصی که خودم تعریف کردم رو پیاده کنم بعدش وقتم رو صرف آموزش nuxt کنم