تفسير مشكلة استهداف this عند استخدام axios في Vue

المقدمة

من المعروف أن axios ظهر بعد vue-resource كإضافة لطلب البيانات في Vue. بعد تحديث Vue إلى الإصدار 2.0، أعلن المؤلف يو يو أنهم لن يقدموا تحديثات أخرى لـ vue-resource، بل سيقترحوا الاستخدامaxios. يمكنك الحصول على مزيد من التفاصيل هنا: https://ar.oldtoolbag.com/article/109444.htm

يهدف هذا المقال إلى شرح مشكلة توجيه this عند استخدام axios في vue، لننتقل إلى الشرح التفصيلي دون إطالة، لنرى الشرح التفصيلي.

1. الحل

عند استخدام axios في vue للقيام بطلبات الشبكة، قد تواجه مشكلة عدم وجود this يشير إلى vue وبدلاً من ذلك يشير إلى undefined، يمكن حل هذه المشكلة باستخدام الدالة المختصرة "=>". كما يلي:

methods: {
 loginAction(formName) {
 this.$axios.post('http://127.0.0.1/u/subLogin', {
  username: this.username,
  password: this.password
 });
  .then(function(response){
  console.log(this); // هنا this = undefined
  });
  .catch((error)=> {
  console.log(error); // دالة "=>" الدالة箭ية تجعل this يشير إلى vue
  });
 });
 }
} 

2. السبب

في ES6، دالة "=>" الدالة箭ية内部的 this هي نطاق الكلمة (هذا يعني أن تُحدد من قبل المحول الخارجي، أي من قبل محول vue).

3. حديث جانبي

باستخدام "=>" دالة، يمكنك الابتعاد عن الطريقتين السابقتين:

استخدام bind(this) لتغيير توجيه هذا في الدالة المجهولة

طريقة hack var _this= this; :

loginAction(formName) {
 var _this= this;
 this.$axios.post("...")
 .then(function(response){
  console.log(_this); // _this يشير إلى vue
 });
 });
 }

الإجمال

هذا هو نهاية محتوى هذا المقال، نأمل أن يكون محتوى هذا المقال له قيمة مرجعية لتعلم أو عمل الجميع، إذا كان لديك أي استفسارات، يمكنك ترك تعليق للتفاعل، شكرًا لدعمكم لتعليم الأناشيد.

بيان: محتويات هذا المقال تم جمعها من الإنترنت، ملكية المحتويات تخص المالك الأصلي، تم جمع المحتويات من قبل المستخدمين على الإنترنت بشكل متعاوني وتحميلها بشكل مستقل، هذا الموقع لا يمتلك حقوق الملكية، لم يتم تعديل المحتويات بشكل إنساني، ولا يتحمل أي مسؤولية قانونية متعلقة بذلك. إذا كنت قد وجدت محتويات مخالفة لحقوق النسخ، فيرجى إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال '#' بـ '@') لإبلاغنا، وقدم الدليل على الدليل، إذا تم التحقق من ذلك، سيتم حذف المحتويات المزعجة فورًا.