Zmienna globalna vue.js

Zmienna globalna vue.js
Sandra
  • Rejestracja:ponad 8 lat
  • Ostatnio:około rok
  • Postów:223
0

Potrzebuje zmiennej globalnej do przechowywania pobieranej na starcie wartości z API - później będzie ta zmienna używana jako element ścieżki do obrazka.

Próbowałam

Kopiuj
Vue.prototype
  • ale Vue pozostaje undefined więc nie da rady.
Kopiuj
globalThis.Text 
  • przechowuje zmienną ok ale czy da się z tego wartość wyciągnąć w src?
Kopiuj
src="cos/dalej/globalThis.Text"
src="cos/dalej/{{globalThis.Text}}"

nie podziałało

Jakaś inna prosta metoda?
Moja znajomość z vue jest baaardzo krótka i słaba.

1programmer
  • Rejestracja:prawie 5 lat
  • Ostatnio:2 dni
  • Lokalizacja:Wrocław
  • Postów:520
2

Do this.$root.$refs nie da rady? Ogólnie do takich rzeczy, to raczej Vuex, Pinia albo jak Vue 3, to można do composition function wyciągnąć to.

W jakim miejscu chcesz to przypisać?


Programować muszę, bo się uduszę
edytowany 1x, ostatnio: 1programmer
Zobacz pozostałe 3 komentarze
1programmer
@Sandra: no to na pewno możesz przypisać w App.vue this.$refs.text = '/img/url...', a potem w dowolnym komponencie np. w computed wyciągnąć z this.$root.$refs.text
1programmer
@Sandra: btw jak chcesz dla img coś podstawić do src, to bindujesz :src="cos/dalej/{{ imageUrl }}"
Sandra
@szafran98: ok właśnie miałam o to pytać :) dzięki zaraz sprawdzę
Sandra
@szafran98: albo robię coś źle albo hmm... na debugu this jest undefined i nic nie mogę tam przypisać dalej
1programmer
@Sandra: to pokaż kod, ale już w poście normalnie i tak też prowadźmy dyskusję, bo się mody wkurzą xd
SP
SP
  • Rejestracja:prawie 3 lata
  • Ostatnio:ponad 2 lata
  • Postów:181
1

Sandra, jak znasz podstawy javascript, to polecam ci obejrzeć internalsy Reacta, tam ludzie pokazują jak jest zaimplementowany useState hook, czyli obiekt sobie wczytujesz, co wewnątrz siebie tak jakby globalnie trzyma dane o stanie aplikacji, ale można też to gdzieś wyżej zaimportować.

W Vue jest podobnie obejrzyj sobie, zawsze trochę wiedzy ci wleci.
Javascript jest wszędzie taki sam.


Knowledge Distiller
Sandra
@Szalony Programista2: dzięki na pewno sprawdzę :)
SP
Szalony Programista2
Mega ja też jak to pierwszy raz widziałem to mówię, że ciekawe i sprytne, fajnie zobaczyć jak ludzie zaimplementowali te frameworki jak Vue, React w gołym javascript, żeby potem tą wiedzę wykorzystać.
Sandra
Zawsze dobrze wiedzieć jak to wszystko działa pod tą ładną przykrywką :)
Sandra
  • Rejestracja:ponad 8 lat
  • Ostatnio:około rok
  • Postów:223
0

App.vue

Kopiuj
<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
name: 'App',
created() {
fetch("/api/path")
method: Get
.....
.then(response => response.json())
.then(json => {
this.$root.$refs.text = json['myValue'];
})
},
components:{ ....

i w drugim pliku

Kopiuj
<template>
<div class='nav'>
<img class=navimg,
alt="xxx",
src="/local/img/{{ this.$root.$refs.text }}/shared/icon.svg" />
...[reszta divów i importów]
1programmer
  • Rejestracja:prawie 5 lat
  • Ostatnio:2 dni
  • Lokalizacja:Wrocław
  • Postów:520
0

Na pewno w templacie nie odwołuje się do this tylko po prostu {{ $root.$refs.text }}. Drugi plik to inny komponent? W hooku created this jest undefined? To jest apka wykorzystująca tylko Vue?


Programować muszę, bo się uduszę
edytowany 1x, ostatnio: 1programmer
Sandra
  • Rejestracja:ponad 8 lat
  • Ostatnio:około rok
  • Postów:223
0

Tak drugi plik to inny komponent. W sumie rzuciłam w kilku miejscach coś z this żeby posprawdzać wartości to wszędzie jest undefined w obu plikach.
Vue i ts na froncie

edytowany 1x, ostatnio: Sandra
1programmer
  • Rejestracja:prawie 5 lat
  • Ostatnio:2 dni
  • Lokalizacja:Wrocław
  • Postów:520
0

No to jak this jest undefined, to coś jest w ogóle zepsute. Jeśli tam jeszcze nic nie masz, to polecam stworzyć projekt przez vue cli i wtedy utworzy Ci na pewno poprawną strukturę projektu oraz komponenty jako SFC (Single File Component).


Programować muszę, bo się uduszę
Zobacz pozostałe 2 komentarze
Sandra
@szafran98: dobra this wypełnia się dopiero gdzieś duuuużo niżej. Może kwestia localhosta <?> obejdę to sobie z Twoim rozwiązaniem i dodatkową funkcją na samym końcu - może uda się załadować potrzebny element mimo to na czas :) dzięki! branch odbity świeżo z mastera więc jest tam to samo
1programmer
@Sandra: na pewno nie przez localhosta, ale powodzenia, bo widzę, że skopany projekt XD
Xarviel
Musisz chyba znaleźć inny sposób niż this.$root.refs, bo dokumentacja twierdzi, że ta właściwość jest dostępna jedynie po pierwszym renderze, a metoda created działa właśnie przed tym renderem, więc możliwe, że dlatego "nie działa" https://vuejs.org/guide/essentials/template-refs.html#accessing-the-refs
Sandra
@Xarviel może tak być nie przeczę nie wiedziałam tego :)
Xarviel
Dlatego wysłałem link :) Zamiana created na mounted teoretycznie powinna rozwiązać problem z dostępem do this.$root.$refs, ale... dane zostaną wtedy pobrane po wyrenderowaniu komponentu.

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.