در جلسه ی قبل موفق شدیم که منطق دکمه ی LoadData را در فایلی به نام actions.js پیاده سازی کنیم. این تابع داده ها را از سمت پایگاه داده دریافت کرده و سپس با صدا زدن mutation های ‘SET_STOCKS’ و ‘SET_PORTFOLIO’ داده های برنامه یا همان state را نیز تغییر می دهد. مشکل اینجاست که در Header.vue هنوز تابع LoadData خالی است. به نظر شما در اینجا باید چه کار کنیم؟ در حال حاضر ما mapActions را در همین فایل داریم تا بتوانیم از randomizeStocks استفاده کنیم. با این حساب آیا می توانیم در همینجا action دیگر خودمان (loadData) را نیز اضافه کنیم؟ احتمالا فکر می کنید پاسخ مثبت است اما اینطور نیست! اگر یادتان باشد در جلسات قبل مشکلی را داشتیم که اگر کد بالا را بنویسیم، باز هم به همان مشکل برمی خوریم. مشکل اینجاست که نام action ما با نام یکی از متد های ما یکسان است (loadData) و ما نمی توانیم یک نام را برای دو متد داشته باشیم (یادتان باشد که action ها در نهایت متد هستند) بنابراین باید به جای پاس دادن آرایه به mapActions از یک شیء استفاده کنیم تا بتوانیم نام مورد نظر خودمان را برای این متد ها انتخاب کنیم. ما با randomizeStocks مشکلی نداریم بنابراین نیازی به عوض کردن نام آن نیست. البته برای loadData نام fetchData را انتخاب کرده ام تا مشکل یکسان بودن نام ها از بین برود. حالا می توانیم متد loadData در این فایل را کامل کنیم:
پنل نویسندگان