Vue.js - koszyk sklepowy

Question

Cześć, chciałbym w Vue.js zrobić koszyk sklepowy gdzie będzie dodawane id produktu, ilość i rozmiar.  Używam Vue i Vuex ale nie mam pojęcia jak to ogarnąć. Muszę te dane zapisywać do localStorage czy jest jakiś inny sposób?

Comments

Ale napisz z czym dokladnie masz problem?

---

Głównie nie wiem od czego zacząć. Przeglądałem trochę internety ale nie mogę znaleźć punktu zaczepienia. Mam formularz dodawania do koszyka i tam są właśnie dwa pola: rozmiar i ilość a id produktu pobieram z url...no i tutaj nie wiem co mam dalej zrobić :D ... wiem tylko że gdzieś to muszę zapisać tak żeby mieć też możliwość edycji (zmiana rozmiaru i ilości) i usunięcia.

Answer 1

Ja bym do przechowywania danych z koszyka - id produktu etc wykorzystywał local storage. Jeśli do tego celu użyjesz vuexa to po odświeżeniu przeglądarki tracisz wszystkie dane. Nie wiem czy to odpowiedź na twoje pytanie ale musisz je zadać bardziej konkretnie :)

Comments

też właśnie o tym myślałem tylko muszę przechowywać tam tablicę i to na niej działać? W senie tą tablicę edytować etc?

---

No to nie problem, musisz najpierw ja przekonwertować na JSONa a potem zrobic odwrotna konwersje.

---

@pawi125, Nie jeśli użyjesz https://github.com/robinvdvleuten/vuex-persistedstate tak jak większość ludzi korzystająca z Vue na co dzień.

---

Spoko paczka, nie wiem czy większość ludzi jej używa ale zapewne warto się nią zainteresować :)

---

Jest kijowa, jak używasz SSR i w vuex trzymasz np bool (false) czy wyświetlać informacje o ciasteczkach to po odswiezeniu przez ulamek sekundy widzisz te informacje mimo wszystko. Bo trzeba ustawić mode: 'client' dla tej paczki bo ona uzywa `document`/`window`

https://nuxtjs.org/faq/window-document-undefined/
https://github.com/robinvdvleuten/vuex-persistedstate#nuxtjs
https://nuxtjs.org/guide/plugins/#object-syntax
 

Answer 2

Też miałem ten problem kilka dni temu. Użyj https://github.com/robinvdvleuten/vuex-persistedstate. To zapisuje cały store do localstorage. Instalacja jest banalnie prosta.