VueJS - Pristup pri izgradnji SPA

Pogrešna ti je logika. Komponenta nije stranica.
Think OOP. Komponenta je instanca nečega što ćeš re-usati.

Baci oko:

Ovaj ti možda bude od pomoći:

Stvar je samo sto sam ja to nazvao page, radi lakseg razumjevanja, mada izgleda nije pomoglo.

Komponenta je komponenta i to mi je jasno.

Evo sad si me bas zainteresirao, pa da bih ti pomogao, i tebi i sebi, reci mi par stvari.
Sto zapravo pokusavas, zasto ti je bitno da taj {{ color }} bude string da ga mozes dohvatiti bilo gdje, gdje spremas proizvode koji su dodani u kosaricu, sto zelis uciniti s tom variablom {{ color }} pa da mora biti globalna?

KAd mi odgovoris na ta pitanja onda cu odraditi jedan tutorial kako bih tebi pomogao, a kok bih se i ja poblize upoznao sa Vue.js pa je to win-win situacija, ali sve mi se cini da kod vas to sve smrdi na bad app design.

Evo izvoli, u biti ovo je simple prototip onoga sto zelim postici

Kao sto vidis {{ color }} nije dostupan van komponente.

btw ovaj data objekt unutar komponente sam ubacio onako bezveze.

A jebote jesi rijecit, Pokusavam pomoci, a ti ni dvije rijeci da bi odgovorio na moje pitanje.

Naravno da nije, nece biti i ne treba i ne smije biti.

Tocno sam imao predosjecaj sto zelis napraviti. To je u potpunosti krivi pristup. Svoje proizvode koje kupac stavi u kosaricu moras negdje spremiti, bio to array, object, database table ili nesto cetvrto, nakon toga u svojoj komponenti koja ti sluzi kao kosarica povlacis te proizvode i prikazujes ih u toj komponenti na taj nacin ti ne trebaju globalne varijable.

Jedan proizvod ima moze imati vise boja, sto u tom slucaju? jedna narudzba moze imati samo jednu varijaciju proizvoda sa samo jendom bojom i u tom slucaju tvoj {{ color }} string nema vise nikakvog smisla jer ga ne mozes vise prikazati,

Evo napravim danas tokom dana jedan jednostavan tutorial da skuzis o cemu pricam.

1 Like

Vidi, ja sam dao sto jednostavniji primjer, naravno da cu spremati u neki array proizvode, i znam kako to izvesti i to nije upitno niti problem ovdje.

Moje pitanje je mislim vrlo jasno, a to je kako da koristim vrijednosti iz jedne komponente van nje ?

Nikako jer to nije dobar design to se ne radi, to je no no i to je ono sto ti pokusavam objasniti, a zbog toga sam te i pitao zasto bi koristio tu vrijednost izvan maticne komponente koja poanta toga zasto ti treba, a ti stedis rijeci kao da ih placas. Podsjecas me na @bozoou kad i on postavi pitanje, pa onda ne zeli dati konkretne odgovore na konkretna pitanja.

Jako mi se cini da imate neki gadni bad app code desgin. Ali bez vise detalja se ne moze nista niti vise reci.

1 Like

Kada pricas o dobrom app design-u toliko, mozes li mi reci koji je to dobar dizajn ?

Eto gore primjer sa jsbina, pa ako mozes primjeni tu.

Hvala.

I opet ti nedade odgovor niti na jedno moje pitanje i kako sad da dalje razgovaramo o bilo cemu?

Nisam trenutno kuci pisem sa moba.

Opet ponavljam, imas JS bin gore - na istom principu i ja radim ovu aplikaciju samo sam htio sto vise da pojednostavim problematiku.

Znaci, eto moj primjer gore u biti vrlo jednostavno, hajde ako mozes napravi to po tvom dizajnu, odnosno dobrom pristupu.

I da u pravoj aplikaciji kosarica se nalazi u offscreen canvasu.

Radi li za tebe obican getter? Npr:

<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
<script>

window.onload = function()
{
  var vm = new Vue({
  el: '#example',
  data: {
    name: 'Vue.js'
  },
  methods: {
    getName: function () {
      return this.name;
    }
  }});
  
  document.getElementById('gumb').addEventListener('click', function(){alert(vm.getName())});
}
</script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Vue</title>
</head>
<body>
  <div id="example"></div>
  <button id="gumb">Gumb</button>
  
</body>
</html>

Hehe, ja ću se ranit…ali kad već prozivaš da odgovorim.
Jedino “konkretno” pitanje na koje od mene nisi dobio odgovor je bilo: “Daj cijeli kod na uvid.”

Kao prvo, to nije konkretno pitanje…i zato ne može imati konkretan odgovor!
Kao drugo, kako da ti dam cijeli code…pa ja sam si pisao programčić da mi prebroji broj skripti i broj karaktera cijelog projekta…i bilo je preko 4 000 000 karaktera, 100 000 linija…i nezz koliko skripti. …neznam kako netko može biti dovoljno lud da očekuje da će to sve dobiti na svijetlo dana eto samo tako…

Pored toga, ako nisam odgovarao na neka konkretna pitanja …zaista se nebi sjećao…
Pošto nebi da dečku blatimo temu…aj bok.

Ako vec nisi, baci oko i na https://github.com/vuejs/vuex

1 Like

Jesi li rjesio ovaj problem?

Na odmoru sam, nisam ni stigao nesto pokusati.

Ako nekog zanima nek pogleda: http://taha-sh.com/blog/building-a-single-page-application-from-scratch-with-vuejs-and-laravel

Tutorijal je jos u izradi ali covijek radi lajt verziju forma slicnog ovog, skinuo sam njegov projekat sa gita i stvarno odlicno izgleda za prvu SPA u Vue :slight_smile:

Hvala decki, vratio sam se sa odmora :slight_smile:

Mislim da je Vuex ono sto mi treba, moram baciti pogled na to - hvala @apazinjan

Takodjer molim i @creatifcode da baci pogled na isti, jer ocito je da Evan You, kreator VueJS-a, ima lose design patterne :wink:

Realno, kakav bi to framework bio ako nije moguce dijeliti data izmedju komponeneta, pa svaka malo kompleksnija aplikacije zahtjeva to.

When using Vue.js alone, we often tend to store the state “inside” our components. That is, each component owns a piece of our application state, and as a result the state is scattered all over the place. However, sometimes a piece of state needs to be shared by multiple components. A commonly-seen practice is letting one component “send” some state to other components using the custom event system. The problem with this pattern is that the event flow inside large component trees can quickly become complex, and it’s often difficult to reason about when something goes wrong.

Hmm… Mislim da Taylor Otwell i Jeffrey Way nebi tolko zagovarli Vuejs da ima lose design patterne jer je njihov fokus uvijek na lijepom i citljivom kodu…

Sarcasm :wink: