Vue.js | הגדרת משתנה גלובלי

[liy770]

איך אני מגדיר ערך גלובלי שאני אוכל לגשת אליו מכל קובץ vue בפרוייקט הזה באמצעות this.$value?

[Shaya]

@liy770
בתוך main.js:

Vue.prototype.$value = value;

[liy770]

@Shaya אמר בVue.js | הגדרת משתנה גלובלי:

@liy770
בתוך main.js:

Vue.prototype.$value = value;

אני יכול לערוך אותו ע״י this.$value = "a"?
ניסיתי וזה לא עבד...

[ב.ל]

@liy770
https://vuejs.org/api/application.html#app-config-globalproperties

app.config.globalProperties.msg = 'hello'

זה מיועד לשמירת ערך קבוע שיהיה זמין בכל הדפים.
אם אתה רוצה ערך שיהיה ניתן להגדרה ושינוי בכל מקום תשתמש בקובץ חיצוני עם ref עיין כאן או עם vuex / pinia

[ב.ל]

@Shaya אמר בVue.js | הגדרת משתנה גלובלי:

בתוך main.js:

Vue.prototype.$value = value;

זה רק בvue2

[yossiz]

@liy770 זה כבר לא קשור ל-VUE אלא ל-JS.

יש הבדל ב-JS בין קריאה של שדה לכתיבה לתוך שדה.
בקריאה, אם השדה לא קיימת אז JS בודק את שרשרת הפרוטוטייפים, ומחזיר את הערך משם אם זה קיים שם.

לעומת זאת, בכתיבה לשדה, זה תמיד יהיה על האובייקט עצמו ולא על הפרוטוטייפ.

(נראה לי שההסבר פשוט, כי JS לא מבחין בין פעולת יצירת השדה לבין פעולת הכתיבה לשדה, שניהם נעשים על ידי השמה לתוך השדה, ואם השדה לא קיימת זה מיוצר אוטומטית, לכן אין דרך לדעת שהתכוונת לפרוטוטייפ ולא לאובייקט עצמו)

יש שתי פתרונות לצורך שלך:

אני מתייחס ל"צורך" בצורה צרה מאוד, כלומר רק לצורך המוצהר של "ערך גלובלי שאני אוכל לגשת אליו מכל קובץ vue בפרוייקט הזה באמצעות this.$value". יש דרכים יותר טובות לניהול state גלובלי

א) תוכל לכתוב לשדה על ידי this.constructor.prototype.$value
ב) להגדיר ש-$value הוא מסוג אובייקט ותמיד תיגש לשדה בתוכו, כך תקבל תמיד גם בכתיבה וגם בקריאה את אותה שדה.

Vue.prototype.$values = { value };

[liy770]

@yossiz אמר בVue.js | הגדרת משתנה גלובלי:

ב) להגדיר ש-$value הוא מסוג אובייקט ותמיד תיגש לשדה בתוכו, כך תקבל תמיד גם בכתיבה וגם בקריאה את אותה שדה.

סורי אבל פחות הבנתי...
(אני צריך משתנה שאני יוכל לגשת אליו מכל קובץ בפרוייקט)

[חוקר]

@liy770 אמר בVue.js | הגדרת משתנה גלובלי:

(אני צריך משתנה שאני יוכל לגשת אליו מכל קובץ בפרוייקט)

בשביל יש את store

[yossiz]

@liy770 התכוונתי שתעשה ככה:
בקובץ הראשי:

Vue.prototype.$values = { xyz: "xyz" };

בגישה לערך מקובץ אחר:

this.$values.xyz

כתיבה לערך:

this.$values.xyz = "abc"

זה היה לפי מה שהחלטת שאתה רוצה לגשת אליו ככה,
הייתי ממליץ במקום זה לשים את הערך בקובץ נפרד, משהו כזה:

xyz.js

let xyz = "xyz"

export function setXyz(val) {  xyz = val }

export function getXyz() { return xyz }

והשימוש:

import { getXyz, setXyz } from './xyz'

let xyz = getXyz
setXyz(xyz + "123")

אם אתה רוצה שהערך יהיה ריאקטיבי (כלומר שהאפליקציה תגיב לשינויים בערך) צריך להשתמש בשירותים של vue לעשות אותו ריאקטיבי, אני לא כל כך מכיר

[liy770]

@yossiz תודה אבל משום מה אני מקבל ערך ריק...

[ב.ל]

@liy770 אמר בVue.js | הגדרת משתנה גלובלי:

@yossiz תודה אבל משום מה אני מקבל ערך ריק...

אם אתה בvue 3 זה לא יעבוד לך
תכתוב כך

app.config.globalProperties.msg = {xyz:xyz}

ועיין מה שכתבתי לעיל

[liy770]

@ב-ל אמר בVue.js | הגדרת משתנה גלובלי:

@liy770 אמר בVue.js | הגדרת משתנה גלובלי:

@yossiz תודה אבל משום מה אני מקבל ערך ריק...

אם אתה בvue 3 זה לא יעבוד לך

וראה מה שכתבתי לעיל

vue2