[{"data":1,"prerenderedAt":1070},["ShallowReactive",2],{"article-\u002Farticles\u002F67b642d51a22a9426af8bf1e":3},{"id":4,"title":5,"articleId":6,"body":7,"cover":1054,"coverThumb":1055,"created":1056,"date":1057,"description":1058,"extension":1059,"meta":1060,"navigation":157,"path":1061,"seo":1062,"stem":1063,"tags":1064,"updated":1068,"__hash__":1069},"articles\u002Farticles\u002F67b642d51a22a9426af8bf1e.md","التفاعلية في أبهي صورها مع useFetch","67b642d51a22a9426af8bf1e",{"type":8,"value":9,"toc":1049},"minimark",[10,14,23,26,34,37,44,47,63,70,73,76,542,548,555,569,575,585,595,610,624,634,640,646,659,669,675,703,713,730,736,741,750,759,765,779,791,1009,1018,1027,1030,1039,1042,1045],[11,12,13],"p",{},"الحمد لله الذي علَّم بالقلم، علَّم الإنسان ما لم يعلم، والصلاة والسلام على خير معلِّم الناس الخير سيدنا محمد - صلَّى الله عليه وسلم … أما بعد ،،",[11,15,16,17,22],{},"في مقال سابق بعنوان \"",[18,19,21],"a",{"href":20},"\u002Farticles\u002F65c9fc4091a5eed01d7083b4\u002F","6 أسباب قد تدفعك لاختيار Nuxt لتنفيذ مشروعك القادم","\"، تناولت بإيجاز عملية \"جلب البيانات\"، وقلت أنها من الجوانب الثورية في Nuxt 3.",[11,24,25],{},"وفي هذا المقال، أتناول هذه العملية بمزيد من التفصيل مع مثال عملي بسيط يوضح جوانب قوتها وكيف تستفيد منها في تطبيقاتك بشكل فعّال.",[27,28,30],"h2",{"id":29},"الطريقة-التقليدية-بدون-استخدام-usefetch",[31,32,33],"strong",{},"الطريقة التقليدية بدون استخدام useFetch",[11,35,36],{},"في المثال التالي، نهدف إلى عرض بيانات مستخدمين من موقع Github، عن طريق جلب كل مستخدم بشكل فردي عند الضغط على زر \"التالي\" أو \"السابق\".",[11,38,39],{},[40,41],"img",{"alt":42,"src":43},"","\u002Fimages\u002F67b6472b1a22a9426af8bf33.webp",[11,45,46],{},"عند كل نقرة على هذه الأزرار، يتم إرسال طلب جديد لجلب البيانات الخاصة بالمستخدم التالي أو السابق، وبالتالي يتم تحديث بيانات المستخدم بشكل ديناميكي.",[11,48,49,50,54,55,58,59,62],{},"لمزيد من التوضيح، سنستخدم حالة تفاعلية باسم ",[51,52,53],"code",{},"currentId"," لتخزين معرف المستخدم الحالي، وعند الرغبة في جلب بيانات مستخدم جديد، سواء كان المستخدم التالي أو السابق، نقوم بتحديث هذه الحالة عن طريق زيادتها أو تقليلها، مما يؤدي إلى إرسال طلب جديد إلى عنوان URL المحدد لهذا المعرف داخل الدالتين ",[51,56,57],{},"nextUser"," و ",[51,60,61],{},"previousUser",".",[11,64,65,66,69],{},"وبمجرد استلام الاستجابة من الخادم، نقوم بتحديث ",[51,67,68],{},"currentUser"," التي تحتوي على اسم المستخدم وصورة ملفه الشخصي.",[11,71,72],{},"بناء علي هذا التحديث، يقوم Nuxt تلقائيًا بإعادة تحديث واجهة المستخدم لعرض البيانات الجديدة، مما يضمن تجربة سلسة وتفاعلية، بالإضافة إلى أنه عند تحميل الصفحة لأول مرة، نقوم مباشرةً بتنفيذ عملية الجلب الأولية حتى يتم عرض بيانات المستخدم الافتراضي فورًا دون الحاجة إلى أي تفاعل يدوي من المستخدم.",[11,74,75],{},"ولتطبيق ما سبق برمجيا يمكن أن يكون الكود بالشكل التالي:",[77,78,82],"pre",{"className":79,"code":80,"language":81,"meta":42,"style":42},"language-typescript shiki shiki-themes github-dark","\u003Cscript setup lang=\"ts\">\nconst currentId = ref(1); \u002F\u002F Start with an initial user ID\nconst currentUser = ref();\n\n\u002F\u002F Function to fetch user data from GitHub API\nconst fetchUserForCurrentId = async () => {\n  try {\n    const user: { name: string | null; avatar_url: string } = await $fetch(\n      `https:\u002F\u002Fapi.github.com\u002Fuser\u002F${currentId.value}`\n    );\n    currentUser.value = {\n      name: user.name || 'No Name Provided',\n      avatarUrl: user.avatar_url,\n    };\n  } catch (error) {\n    console.error('Error fetching user:', error);\n    currentUser.value = null;\n  }\n};\n\n\u002F\u002F Fetch user data when the component is mounted\nonBeforeMount(() => {\n  fetchUserForCurrentId();\n});\n\n\u002F\u002F Function to fetch the next user (increment ID)\nconst nextUser = async () => {\n  currentId.value++;\n  await fetchUserForCurrentId();\n};\n\n\u002F\u002F Function to fetch the previous user (decrement ID)\nconst previousUser = async () => {\n  if (currentId.value > 1) {\n    currentId.value--;\n  }\n  await fetchUserForCurrentId();\n};\n\u003C\u002Fscript>\n","typescript",[51,83,84,107,137,152,159,165,187,195,249,265,271,281,296,302,308,320,337,349,355,361,366,372,385,393,399,404,410,428,439,449,454,459,465,483,501,512,517,526,531],{"__ignoreMap":42},[85,86,89,93,97,100,104],"span",{"class":87,"line":88},"line",1,[85,90,92],{"class":91},"snl16","\u003C",[85,94,96],{"class":95},"s95oV","script setup lang",[85,98,99],{"class":91},"=",[85,101,103],{"class":102},"sU2Wk","\"ts\"",[85,105,106],{"class":91},">\n",[85,108,110,113,117,120,124,127,130,133],{"class":87,"line":109},2,[85,111,112],{"class":91},"const",[85,114,116],{"class":115},"sDLfK"," currentId",[85,118,119],{"class":91}," =",[85,121,123],{"class":122},"svObZ"," ref",[85,125,126],{"class":95},"(",[85,128,129],{"class":115},"1",[85,131,132],{"class":95},"); ",[85,134,136],{"class":135},"sAwPA","\u002F\u002F Start with an initial user ID\n",[85,138,140,142,145,147,149],{"class":87,"line":139},3,[85,141,112],{"class":91},[85,143,144],{"class":115}," currentUser",[85,146,119],{"class":91},[85,148,123],{"class":122},[85,150,151],{"class":95},"();\n",[85,153,155],{"class":87,"line":154},4,[85,156,158],{"emptyLinePlaceholder":157},true,"\n",[85,160,162],{"class":87,"line":161},5,[85,163,164],{"class":135},"\u002F\u002F Function to fetch user data from GitHub API\n",[85,166,168,170,173,175,178,181,184],{"class":87,"line":167},6,[85,169,112],{"class":91},[85,171,172],{"class":122}," fetchUserForCurrentId",[85,174,119],{"class":91},[85,176,177],{"class":91}," async",[85,179,180],{"class":95}," () ",[85,182,183],{"class":91},"=>",[85,185,186],{"class":95}," {\n",[85,188,190,193],{"class":87,"line":189},7,[85,191,192],{"class":91},"  try",[85,194,186],{"class":95},[85,196,198,201,204,207,210,214,216,219,222,225,228,231,233,235,238,240,243,246],{"class":87,"line":197},8,[85,199,200],{"class":91},"    const",[85,202,203],{"class":115}," user",[85,205,206],{"class":91},":",[85,208,209],{"class":95}," { ",[85,211,213],{"class":212},"s9osk","name",[85,215,206],{"class":91},[85,217,218],{"class":115}," string",[85,220,221],{"class":91}," |",[85,223,224],{"class":115}," null",[85,226,227],{"class":95},"; ",[85,229,230],{"class":212},"avatar_url",[85,232,206],{"class":91},[85,234,218],{"class":115},[85,236,237],{"class":95}," } ",[85,239,99],{"class":91},[85,241,242],{"class":91}," await",[85,244,245],{"class":122}," $fetch",[85,247,248],{"class":95},"(\n",[85,250,252,255,257,259,262],{"class":87,"line":251},9,[85,253,254],{"class":102},"      `https:\u002F\u002Fapi.github.com\u002Fuser\u002F${",[85,256,53],{"class":95},[85,258,62],{"class":102},[85,260,261],{"class":95},"value",[85,263,264],{"class":102},"}`\n",[85,266,268],{"class":87,"line":267},10,[85,269,270],{"class":95},"    );\n",[85,272,274,277,279],{"class":87,"line":273},11,[85,275,276],{"class":95},"    currentUser.value ",[85,278,99],{"class":91},[85,280,186],{"class":95},[85,282,284,287,290,293],{"class":87,"line":283},12,[85,285,286],{"class":95},"      name: user.name ",[85,288,289],{"class":91},"||",[85,291,292],{"class":102}," 'No Name Provided'",[85,294,295],{"class":95},",\n",[85,297,299],{"class":87,"line":298},13,[85,300,301],{"class":95},"      avatarUrl: user.avatar_url,\n",[85,303,305],{"class":87,"line":304},14,[85,306,307],{"class":95},"    };\n",[85,309,311,314,317],{"class":87,"line":310},15,[85,312,313],{"class":95},"  } ",[85,315,316],{"class":91},"catch",[85,318,319],{"class":95}," (error) {\n",[85,321,323,326,329,331,334],{"class":87,"line":322},16,[85,324,325],{"class":95},"    console.",[85,327,328],{"class":122},"error",[85,330,126],{"class":95},[85,332,333],{"class":102},"'Error fetching user:'",[85,335,336],{"class":95},", error);\n",[85,338,340,342,344,346],{"class":87,"line":339},17,[85,341,276],{"class":95},[85,343,99],{"class":91},[85,345,224],{"class":115},[85,347,348],{"class":95},";\n",[85,350,352],{"class":87,"line":351},18,[85,353,354],{"class":95},"  }\n",[85,356,358],{"class":87,"line":357},19,[85,359,360],{"class":95},"};\n",[85,362,364],{"class":87,"line":363},20,[85,365,158],{"emptyLinePlaceholder":157},[85,367,369],{"class":87,"line":368},21,[85,370,371],{"class":135},"\u002F\u002F Fetch user data when the component is mounted\n",[85,373,375,378,381,383],{"class":87,"line":374},22,[85,376,377],{"class":122},"onBeforeMount",[85,379,380],{"class":95},"(() ",[85,382,183],{"class":91},[85,384,186],{"class":95},[85,386,388,391],{"class":87,"line":387},23,[85,389,390],{"class":122},"  fetchUserForCurrentId",[85,392,151],{"class":95},[85,394,396],{"class":87,"line":395},24,[85,397,398],{"class":95},"});\n",[85,400,402],{"class":87,"line":401},25,[85,403,158],{"emptyLinePlaceholder":157},[85,405,407],{"class":87,"line":406},26,[85,408,409],{"class":135},"\u002F\u002F Function to fetch the next user (increment ID)\n",[85,411,413,415,418,420,422,424,426],{"class":87,"line":412},27,[85,414,112],{"class":91},[85,416,417],{"class":122}," nextUser",[85,419,119],{"class":91},[85,421,177],{"class":91},[85,423,180],{"class":95},[85,425,183],{"class":91},[85,427,186],{"class":95},[85,429,431,434,437],{"class":87,"line":430},28,[85,432,433],{"class":95},"  currentId.value",[85,435,436],{"class":91},"++",[85,438,348],{"class":95},[85,440,442,445,447],{"class":87,"line":441},29,[85,443,444],{"class":91},"  await",[85,446,172],{"class":122},[85,448,151],{"class":95},[85,450,452],{"class":87,"line":451},30,[85,453,360],{"class":95},[85,455,457],{"class":87,"line":456},31,[85,458,158],{"emptyLinePlaceholder":157},[85,460,462],{"class":87,"line":461},32,[85,463,464],{"class":135},"\u002F\u002F Function to fetch the previous user (decrement ID)\n",[85,466,468,470,473,475,477,479,481],{"class":87,"line":467},33,[85,469,112],{"class":91},[85,471,472],{"class":122}," previousUser",[85,474,119],{"class":91},[85,476,177],{"class":91},[85,478,180],{"class":95},[85,480,183],{"class":91},[85,482,186],{"class":95},[85,484,486,489,492,495,498],{"class":87,"line":485},34,[85,487,488],{"class":91},"  if",[85,490,491],{"class":95}," (currentId.value ",[85,493,494],{"class":91},">",[85,496,497],{"class":115}," 1",[85,499,500],{"class":95},") {\n",[85,502,504,507,510],{"class":87,"line":503},35,[85,505,506],{"class":95},"    currentId.value",[85,508,509],{"class":91},"--",[85,511,348],{"class":95},[85,513,515],{"class":87,"line":514},36,[85,516,354],{"class":95},[85,518,520,522,524],{"class":87,"line":519},37,[85,521,444],{"class":91},[85,523,172],{"class":122},[85,525,151],{"class":95},[85,527,529],{"class":87,"line":528},38,[85,530,360],{"class":95},[85,532,534,537,540],{"class":87,"line":533},39,[85,535,536],{"class":91},"\u003C\u002F",[85,538,539],{"class":95},"script",[85,541,106],{"class":91},[11,543,544,545,62],{},"الطريقة السابقة تعمل بشكل جيد، لكنها ليست الطريقة الأمثل من حيث الاستفادة القصوي من إمكانيات ",[31,546,547],{},"Nuxt",[11,549,550,551,554],{},"في الكود السابق، تم جلب البيانات بطريقة ",[31,552,553],{},"إجرائية (Imperative)","، مما يعني أننا نحدد للبرنامج بشكل مباشر كل خطوة يجب تنفيذها، مثل تحديث المعرف، ثم إرسال الطلب، ثم انتظار الاستجابة، ثم تحديث البيانات يدويًا.",[11,556,557,558,560,561,564,565,568],{},"لكن ",[31,559,547],{}," المبني علي ",[31,562,563],{},"Vue"," يوفر نظامًا ",[31,566,567],{},"تفاعليًا (Reactive)"," قويًا، يمكننا من خلاله جعل التطبيق يستجيب تلقائيًا لأي تغيير في الحالة، دون الحاجة إلى تشغيل العمليات يدويًا في كل مرة.",[27,570,572],{"id":571},"ما-هي-usefetch",[31,573,574],{},"ما هي useFetch ؟",[11,576,577,578,581,582,62],{},"قبل أن نتمكن من استخدام ",[51,579,580],{},"useFetch"," بكفاءة، من المهم أولًا أن نفهم ",[31,583,584],{},"ما هي وكيف تعمل",[11,586,587,588,590,591,594],{},"ببساطة، ",[51,589,580],{}," هي ",[31,592,593],{},"دالة قابلة لإعادة الاستخدام (Composable)"," توفرها Nuxt لتسهيل عملية جلب البيانات داخل المكونات.",[596,597,598],"blockquote",{},[11,599,600,601,604,605,609],{},"للمزيد حول ",[31,602,603],{},"إعادة استخدام المنطق التفاعلي","، يمكنك الرجوع إلى مقالي السابق \"",[18,606,608],{"href":607},"\u002Farticles\u002F6739ebbd4e9c5b5b41767b17\u002F","إعادة استخدام الكود بذكاء مع Composables في Nuxt","\"، حيث استعرضت أمثلة عملية وأفضل الممارسات لكتابة كود نظيف وقابل للصيانة.",[11,611,612,613,615,616,619,620,623],{},"في ",[31,614,547],{}," تشير كلمة ",[31,617,618],{},"Composable"," إلى دالة تستفيد من ",[31,621,622],{},"Composition API"," لاحتواء منطق معين يمكن إعادة استخدامه بسهولة في أكثر من مكون، مما يساعد في تنظيم الكود وجعله أكثر مرونة.",[11,625,626,627,629,630,633],{},"ما يميز ",[51,628,580],{}," هو أنه ",[31,631,632],{},"يحتفظ بحالة تفاعلية داخليًا","، ويتابع أي تغييرات تحدث على المتغيرات التي يعتمد عليها، وعندما يتم تغيير هذه القيم، يقوم تلقائيًا بإعادة تنفيذ عملية الجلب دون الحاجة إلى تشغيلها يدويًا.",[11,635,636,637,639],{},"هذا يعني أن ",[51,638,580],{}," يتكامل بشكل كامل مع دورة حياة المكون، مما يجعل إدارة البيانات أكثر سهولة وسلاسة، ويقلل من كمية الكود المطلوب لكتابة عمليات الجلب التقليدية.",[11,641,642,643,645],{},"ولمزيد من التوضيح، يمكن استدعاء ",[51,644,580],{}," مع إعدادات مخصصة لطلب HTTP، مثل عنوان URL، والمعاملات (Query Parameters)، والترويسات (Headers)، وهيئة الطلب (Body)، وطريقة الطلب (Method)، وغيرها.",[11,647,648,649,652,653,652,656,62],{},"بحيث يمكن تحديد هذه القيم إما كمتغيرات عادية أو كمتغيرات تفاعلية مثل ",[51,650,651],{},"ref"," و",[51,654,655],{},"reactive",[51,657,658],{},"computed",[11,660,661,662,665,666,668],{},"وعند استخدام ",[31,663,664],{},"متغير تفاعلي"," في الإعدادات، فإن أي تغيير يطرأ عليه يؤدي إلى إعادة تنفيذ الطلب تلقائيًا بواسطة ",[51,667,580],{},"، مما يجعله متكاملًا مع النظام التفاعلي في Nuxt.",[11,670,671,672,674],{},"تُعيد ",[51,673,580],{}," كائنًا يحتوي على ثلاث قيم رئيسية:",[676,677,678,686,697],"ul",{},[679,680,681,682,685],"li",{},"البيانات ",[51,683,684],{},"data",": تمثل البيانات المسترجعة من الاستجابة.",[679,687,688,689,692,693,696],{},"الحالة ",[51,690,691],{},"pending",": متغير منطقي (",[51,694,695],{},"boolean",") يشير إلى ما إذا كان الطلب قيد التنفيذ.",[679,698,699,700,702],{},"الخطأ ",[51,701,328],{},": كائن يحتوي على معلومات حول أي خطأ قد يحدث أثناء الطلب.",[11,704,705,706,709,710,712],{},"بالإضافة إلى ذلك، يمكننا استخدام خيار ",[51,707,708],{},"pick"," ضمن إعدادات ",[51,711,580],{},"، والذي يتيح لنا تحديد المفاتيح التي نرغب في استخراجها من البيانات المسترجعة، مع تجاهل باقي القيم غير المطلوبة.",[11,714,715,716,718,719,62],{},"لمزيد من التفاصيل حول إعدادات ",[51,717,580],{}," وإمكانياته، يمكن الرجوع إلى ",[18,720,727],{"href":721,"rel":722,"target":726},"https:\u002F\u002Fnuxt.com\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-fetch",[723,724,725],"nofollow","noopener","noreferrer","_blank",[31,728,729],{},"توثيق Nuxt الرسمي",[27,731,733],{"id":732},"تطبيق-usefetch-علي-المثال-السابق",[31,734,735],{},"تطبيق useFetch علي المثال السابق",[11,737,738,739,62],{},"بدلًا من استدعاء دالة جلب البيانات يدويًا في كل مرة نرغب في عرض المستخدم التالي أو السابق، يمكننا جعل العملية أكثر تفاعلية وسلاسة باستخدام ",[51,740,580],{},[11,742,743,744,746,747,749],{},"كل ما نحتاج إليه هو تحديث قيمة ",[51,745,53],{},"، وسيقوم ",[51,748,580],{}," تلقائيًا بجلب بيانات المستخدم الجديد دون الحاجة إلى تشغيل أي دالة إضافية.",[11,751,752,753,755,756,758],{},"لكي يعمل ",[51,754,580],{}," بشكل تلقائي عند تغيير معرف المستخدم (",[51,757,53],{},")، نحتاج إلى جعل عنوان URL نفسه متغيرًا تفاعليًا.",[11,760,761,762,764],{},"يمكننا تحقيق ذلك باستخدام ",[51,763,658],{},"، وهي دالة تتيح لنا إنشاء متغير تفاعلي محسوب، يتم تحديث قيمته تلقائيًا بمجرد حدوث أي تغيير في المتغيرات التي يعتمد عليها.",[596,766,767],{},[11,768,769,770,774,775,778],{},"لتحسين أداء تطبيقاتك وجعلها أكثر مرونة، يمكنك الرجوع إلى مقالي السابق \"",[18,771,773],{"href":772},"\u002Farticles\u002F673e09094e9c5b5b41768284\u002F","فهم التفاعلية في Vue لجعل تطبيقاتك أكثر سلاسة","\"، حيث قدمت شرحًا عمليًا حول ",[31,776,777],{},"إدارة البيانات التفاعلية بكفاءة"," وأفضل الممارسات لتعزيز استجابة التطبيق وتحسين تجربة المستخدم.",[11,780,781,782,784,785,787,788,790],{},"عند استخدام ",[51,783,658],{}," لإنشاء عنوان URL ديناميكي يعتمد على ",[51,786,53],{},"، سيقوم ",[51,789,580],{}," بإعادة تنفيذ الطلب تلقائيًا كلما تغير معرف المستخدم، مما يجعل الكود أكثر بساطة وكفاءة، ويوفر تجربة أكثر سلاسة للمستخدم.",[77,792,794],{"className":79,"code":793,"language":81,"meta":42,"style":42},"\u003Cscript setup lang=\"ts\">\nconst currentId = ref(1);\nconst url = computed(() => `https:\u002F\u002Fapi.github.com\u002Fuser\u002F${currentId.value}`);\nconst { data: currentUser } = useFetch\u003C{\n  name: string | null;\n  avatar_url: string;\n}>(url, { pick: ['name', 'avatar_url'] });\n\nconst nextUser = async () => {\n  currentId.value++;\n};\n\nconst previousUser = async () => {\n  if (currentId.value > 1) {\n    currentId.value--;\n  }\n};\n\u003C\u002Fscript>\n",[51,795,796,808,825,855,878,893,904,921,925,941,949,953,957,973,985,993,997,1001],{"__ignoreMap":42},[85,797,798,800,802,804,806],{"class":87,"line":88},[85,799,92],{"class":91},[85,801,96],{"class":95},[85,803,99],{"class":91},[85,805,103],{"class":102},[85,807,106],{"class":91},[85,809,810,812,814,816,818,820,822],{"class":87,"line":109},[85,811,112],{"class":91},[85,813,116],{"class":115},[85,815,119],{"class":91},[85,817,123],{"class":122},[85,819,126],{"class":95},[85,821,129],{"class":115},[85,823,824],{"class":95},");\n",[85,826,827,829,832,834,837,839,841,844,846,848,850,853],{"class":87,"line":139},[85,828,112],{"class":91},[85,830,831],{"class":115}," url",[85,833,119],{"class":91},[85,835,836],{"class":122}," computed",[85,838,380],{"class":95},[85,840,183],{"class":91},[85,842,843],{"class":102}," `https:\u002F\u002Fapi.github.com\u002Fuser\u002F${",[85,845,53],{"class":95},[85,847,62],{"class":102},[85,849,261],{"class":95},[85,851,852],{"class":102},"}`",[85,854,824],{"class":95},[85,856,857,859,861,863,866,868,870,872,875],{"class":87,"line":154},[85,858,112],{"class":91},[85,860,209],{"class":95},[85,862,684],{"class":212},[85,864,865],{"class":95},": ",[85,867,68],{"class":115},[85,869,237],{"class":95},[85,871,99],{"class":91},[85,873,874],{"class":122}," useFetch",[85,876,877],{"class":95},"\u003C{\n",[85,879,880,883,885,887,889,891],{"class":87,"line":161},[85,881,882],{"class":212},"  name",[85,884,206],{"class":91},[85,886,218],{"class":115},[85,888,221],{"class":91},[85,890,224],{"class":115},[85,892,348],{"class":95},[85,894,895,898,900,902],{"class":87,"line":167},[85,896,897],{"class":212},"  avatar_url",[85,899,206],{"class":91},[85,901,218],{"class":115},[85,903,348],{"class":95},[85,905,906,909,912,915,918],{"class":87,"line":189},[85,907,908],{"class":95},"}>(url, { pick: [",[85,910,911],{"class":102},"'name'",[85,913,914],{"class":95},", ",[85,916,917],{"class":102},"'avatar_url'",[85,919,920],{"class":95},"] });\n",[85,922,923],{"class":87,"line":197},[85,924,158],{"emptyLinePlaceholder":157},[85,926,927,929,931,933,935,937,939],{"class":87,"line":251},[85,928,112],{"class":91},[85,930,417],{"class":122},[85,932,119],{"class":91},[85,934,177],{"class":91},[85,936,180],{"class":95},[85,938,183],{"class":91},[85,940,186],{"class":95},[85,942,943,945,947],{"class":87,"line":267},[85,944,433],{"class":95},[85,946,436],{"class":91},[85,948,348],{"class":95},[85,950,951],{"class":87,"line":273},[85,952,360],{"class":95},[85,954,955],{"class":87,"line":283},[85,956,158],{"emptyLinePlaceholder":157},[85,958,959,961,963,965,967,969,971],{"class":87,"line":298},[85,960,112],{"class":91},[85,962,472],{"class":122},[85,964,119],{"class":91},[85,966,177],{"class":91},[85,968,180],{"class":95},[85,970,183],{"class":91},[85,972,186],{"class":95},[85,974,975,977,979,981,983],{"class":87,"line":304},[85,976,488],{"class":91},[85,978,491],{"class":95},[85,980,494],{"class":91},[85,982,497],{"class":115},[85,984,500],{"class":95},[85,986,987,989,991],{"class":87,"line":310},[85,988,506],{"class":95},[85,990,509],{"class":91},[85,992,348],{"class":95},[85,994,995],{"class":87,"line":322},[85,996,354],{"class":95},[85,998,999],{"class":87,"line":339},[85,1000,360],{"class":95},[85,1002,1003,1005,1007],{"class":87,"line":351},[85,1004,536],{"class":91},[85,1006,539],{"class":95},[85,1008,106],{"class":91},[11,1010,1011,1012,1014,1015,1017],{},"لاحظ في الكود السابق تم تمرير عنوان URL إلى ",[51,1013,580],{}," وإضافة خيار ",[51,1016,708],{}," لتحديد البيانات المطلوبة من الاستجابة، كما ذكرنا سابقًا.",[11,1019,1020,1021,1023,1024,1026],{},"وأيضا لم نعد بحاجة إلى استخدام ",[51,1022,377],{},"، لأن ",[51,1025,580],{}," يقوم تلقائيًا بجلب البيانات عند تحميل المكون، مما يجعل الكود أكثر بساطة وتنظيمًا دون الحاجة إلى تنفيذ الطلب يدويًا.",[11,1028,1029],{},"وهذا هو المطلوب!",[11,1031,1032,1033,1035,1036,1038],{},"الشيء الوحيد الذي نحتاج إلى تغييره يدويًا هو تحديث قيمة ",[51,1034,53],{}," عند التنقل بين المستخدمين، إذ بمجرد تغيير هذه القيمة، يقوم ",[51,1037,580],{}," تلقائيًا بإعادة جلب البيانات وتحديث الواجهة دون الحاجة لأي تدخل إضافي، مما يجعل التطبيق أكثر كفاءة وسلاسة.",[11,1040,1041],{},"ختاما، يسعدني معرفة آرائك ومقترحاتك حول المقال، فهي تسهم في تحسين وتطوير ما أقدمه من محتوى، لذا فضلا اترك تعليقك، وسأكون سعيداً بقراءة مقترحاتك والعمل على تقديم محتوى يلبي تطلعاتك - بإذن الله.",[11,1043,1044],{},"وفقنى الله وإياك إلى ما يحبه ويرضاه ،،",[1046,1047,1048],"style",{},"html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .s9osk, html code.shiki .s9osk{--shiki-default:#FFAB70}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":42,"searchDepth":109,"depth":139,"links":1050},[1051,1052,1053],{"id":29,"depth":109,"text":33},{"id":571,"depth":109,"text":574},{"id":732,"depth":109,"text":735},"\u002Fimages\u002F67b646de1a22a9426af8bf29.webp","\u002Fimages\u002F67b646de1a22a9426af8bf29_thumb.webp","2025-02-19T20:45:09.101Z","2025-02-19T21:18:01.122Z","يستعرض المقال كيفية استخدام useFetch في Nuxt 3 لجلب البيانات بشكل تفاعلي، دون الحاجة لتنفيذ الأوامر يدويًا في كل مرة، مما يحسن الأداء ويوفر تجربة أكثر تفاعلية للمستخدم.","md",{},"\u002Farticles\u002F67b642d51a22a9426af8bf1e",{"title":5,"description":1058},"articles\u002F67b642d51a22a9426af8bf1e",[1065],{"id":1066,"label":1067},"65ae26381d50740dab36fdb7","اطار Nuxt","2025-02-19T21:18:01.354Z","NyiEWv3-yxA0itW16YZ2Oed_xNmDMPuw-k-Yb70ytoA",1788209571790]