VUE שימוש במשתנה מקומפוננט אחר

[katz]

אני מנסה לקרוא למשתנה שהגדרתי בקומפוננטה בקובץ אחד, לקובץ אחר.

לדוגמא:
יש לי דף login.vue
שם הגדרתי משתנה בשם user

export default {
  data() {
    return {
      user: "name", 
    }; 
  },

בקובץ השני אני עושה אימפורט (import) לקובץ ה login:

import login from "../views/login.vue";

איך אני יכול עכשיו לקרוא ל משתנה user

ניסיתי

login.user 
or
login.data.user

אך אני לא מקבל את התוצאה, במקרה שלי "name"

מה עוד לא הגדרתי נכון?

[OdedDvir]

אתה צריך להשתמש בקובץ עזר js או json, ולא לייבא מתוך קומפוננט vue.
יש כאן תשובה:
https://stackoverflow.com/questions/50715823/how-do-i-access-data-from-an-external-file-in-vue-js

[yossiz]

@כץ-יוסף משתנים בתוך קומפוננט הם לוקליים לקומפוננט ההוא.

השורה:

import login from "../views/login.vue";

נותן לך את ה"תבנית" של הקומפוננט, שהוא בערך מקביל ל-class בשפות תכנות. זה לא מצביע על מופע מסויים של הקומפוננט.

עם זאת, יש כמה דרכים לשתף מידע בין קומפוננטים:

• אפשר להעביר אותם לקומפוננט בנים דרך props.
• אפשר להעביר לאבא על ידי אירוע, לשם זה תשתמש ב-this.$emit ובאבא תאזין לאירוע על ידי v-on
• אפשר לעשות קומפוננט מיוחד עבור שיתוף מידע, עיין כאן: https://vuejs.org/v2/guide/migration.html#dispatch-and-broadcast-replaced
• אפשר להשתמש ב-vuex עבור שמירת state מרכזי לכל האפליקציה

עריכה: אני הבנתי את הסיטואציה שמדובר במידע שמתקבל בצורה דינאמית בתוך הקומפוננט, אם זה מידע סטטי אז התשובה היא מה ש-@OdedDvir הביא, דהיינו לא לשמור אותו בתוך קומפוננט.

[davidnead]

הדרך האולטימטיבית היא VUEX, אלא אם זה מקרה חריג ובדרך כלל אינך צריך, ואז לא שווה "להתלכלך" עם VUEX בשביל זה.
VUEX - נועד בדיוק לזה, סטייט שאינו ספציפי לקומפוננט מסוים.

[katz]

@davidnead אכן התחלתי להשתמש איתו, כלי מדהים שלא היכרתי!!