VUE ניטור שינויים במשתנה המאוכלס ב store
-
יש לי דשבורד בVUE יש בו תפריט עליון המורכב מקומפוננטה המכיל רכיבי תפריט עליון
אחד הרכיבים הוא תפריט נפתח שבו במשתמש יכול לבחור את הפרוייקט המבוקש לניהול.
בקומפוננטה ההיא מוגדר שברגע שהוא בחר פרוויקט זה נשמר לי ב localStorage וב store (ע"י commit).
בתצוגה עצמה אני מציג למשתמש את פרטי הפרוייקט המבוקש והאופציות הרלוונטיות.
מזהה הפרוייקט המבוקש נלקח מתוך ה store, וזה נשלח לשרת לבקש את פרטי הפרוייקט המבוקש בעת טעינת הדף.
הנתונים שם מתרעננים כל 5 שניות מול השרת, ולכן אם הוא שינה פרוייקט מבוקש לניהול, אזי בריענון הבא כבר יוצג לו הפרוייקט המבוקש כעת.
אני רוצה דרך לנטר בקומפוננטה של ניהול הפרוייקט שברגע שהוא מזהה שינוי בפרוייקט המבוקש (נכון לעכשיו הוי אומר שינוי בנתון מאוחסן ב store) תרוץ הפונקציה של שאיבת הנתונים וממילא התצוגה תתעדכן בפרטים של הפרוייקט הנבחר כעת.
אציין, בקומפוננטה של הניהול יש input של תאריך שיש בו@change="setSelectedDate"
ובעצם אני צריך משהו בסגנון שרץ לאחר שינוי, אך לו מה input שם, אלא מאירוע לחיצה על פרוייקט מבוקש בקומפוננטה של התפריט העליון.
אציין שאני כבר עם ידע לא רע ב VUE.
-
@chagold
על פי דבריך ומראי המקומות ב"ה הצלחתי.
מה שעשיתי הואcomputed: { getSelectedProject: () => store.state.app.selectedProject, }, watch: { getSelectedProject(val) { this.selectedProject = val this.myProvider() }, },
יש לי אובייקט getSelectedProject שהוא מחושב ומקושר ל store ויש לי צופה באם הערך של getSelectedProject השתנה הוא מפעיל את הפונקציה של ריענון הנתונים וכו' מול השרת.
תודה רבה! -
@חוקר אמר בVUE ניטור שינויים במשתנה המאוכלס ב store:
אציין שאני כבר עם ידע לא רע ב VUE.
מזל טוב!
@חוקר אמר בVUE ניטור שינויים במשתנה המאוכלס ב store:
computed: { getSelectedProject: () => store.state.app.selectedProject, },
יש helper שמיועד בדיוק לזה:
import { mapState } from 'vuex' .... computed: { ...mapState('app', ['selectedProject']) }
ועיין: https://vuex.vuejs.org/guide/state.html#getting-vuex-state-into-vue-components