سه روش برای مقدار دهی اولیه store با استفاده از vuex در پروژه های vue-cli

مقدار دهی به صورت مستقیم در فایل مربوط به store

تو این حالت شما هنگام تعریف کردن property ها (یا همون state هاتون) باید مقدار اولیه رو مشخص کنید:

همونطور که در تصویر زیر میبینید ما به user مقدار اولیه دادیم:

کار دیگه ای که تو این روش میشه انجام داد این هست که دیتا مون رو قبلا تو localstorage ذخیره کرده باشیم و الان بخوایم تو store ذخیرش کنیم:

ایراد روش بالا این هست که اطلاعات حساس مثله token ها رو نمیشه اینطور ذخیره کرد چون احتمال XSS attacks به وجود میاد(سعی میکنم یه پست راجع بهش بنویسیم اما سرچ کنید حتما مطالبه زیادی در موردش پیدا میکنید)

راه حلش این هست که توی store ذخیره بشن نه اینکه store از localstorage بخونه که خوب برای این کار میتونید در فایل App.vue تو یکی از hook های created و یا mounted در خواست http رو با axios و یا چیزی مشابه آن بزنید و اطلاعات رو تو store ذخیره کنید:

در تصویر زیر متد getUser متدی هست که درخواست http میزنه (جزییاتش بستگی به چیزی داره که ازش استفاده میکنید لذا از پیاده سازیش رو حذف کردم)

ایراد این روش این هست که چون وقتی vue root instance شروع به load شدن میکنه این درخواست زده میشه به همین خاطر شما یک پرش خواهید داشت یعنی اگر تو این درخواست قرار هست اطلاعات کاربری دریافت و در store ذخیره بشه ابتدا هنگام لود شده اولین صفحه کاربر لاگین نیست بعد که جواب درخواستتون از سرور میرسه و نتیجه تو store ذخیره میشه حالا تازه کاربر لاگین میشه و اطلاعاتش نمایش داده میشه.

خوب این یک مشکل بزرگ هست چطور باید حلش کرد؟

باید درخواستتون رو قبل از load شدن vue root instance بزنید.

کجا میشه این کار رو کرد؟

main.js

شما میتونید در بالای این فایل vuex رو import کنید و درخواست http تون رو بزنید و اطلاعات رو store کنید:

امیدوارم این پست براتون مفید بوده باشه.

خوشحال میشم بهم فیدبک بدین و سوال و چالش هاتون رو مطرح کنید.