Asynchroniczne odswiezanie 'listy'?

Czesc, mam pytanie, jak zrobic odwieżanie akcji index bez koniecznosci odswiezania strony. Dokladniej mam w aplikacji diva wyswietlajacego wszystkie elementy itp. Moge je dodawac i usuwac przez komponenty napisane w Vue.js, ale kazdorazowo, po takiej operacji niestety trzeba odswiezyc strone zeby zobaczyc aktualna liste przedmiotow.

Poczytaj nt. zarządzaniem stanem aplikacji używając biblioteki vuex. Przy odświeżeniu strony, robisz request po aktualna listę i ustawiasz aktualny stan aplikacji. Następnie, obojętnie czy usuwasz element, czy dodajesz, za każdym razem aktualizujesz stan aplikacji, dzięki czemu masz aktualną listę bez pobierania.

Spróbuj urzyc ajaxa tak jak w jednym z tutoriali :slight_smile:

Agile web development with rails rozdział 11

http://komar.bitcheese.net/files/Ruby%20S.,%20Thomas%20D.,%20Heinemeier%20Hansson%20D.%20-%20Agile%20Web%20Development%20with%20Rails,%204th%20Edition,%20Rails%203.2%20(The%20Pragmatic%20Programmers)%20-%202011.pdf#page147

Z Ajaxem jak napisał @Barti nie miałem większego problemu, jednak mam problem ze zrozumieniem działania pomysłu @korowiov87 rozumiem, że jak odwieżam stronę to mam w apce w Vue.js jakie created na turbolinks jak się załaduja i pobieram aktualna liste z akcji show, jednak potem jak usuwam elementy itp. to też powinienem to robi przez Vue w sensie dac request do destroy zeby usunal sie z bazy i po sukcesie usunac go ze stanu aplikacji w Vue i rzeczywisty stan aplikacji miec zawsze po odswiezeniue tak, a do odswiezenia miec taki jakby zeszyt w ktorym trzymam kopie i notuje co robie na bazie wiec powinienem miec to samo, dobrze to zrozumialem?

Koncepcja zarządzaniem stanem aplikacji, na początku wydaje się zagmatwana, ale da radę ogarnąć :wink:
Ogólnie składa się z 4 części :

  1. State - obiekt, gdzie przechowujemy aktualną stan aplikacji. Przy uruchomieniu aplikacji, mamy tzw. stan zerowy (może to być pusta tablica).
  2. Getters - metody zwracające aktualny stan aplikacji
  3. Mutations - metody, mutujące stan aplikacji
  4. Actions - metody, które wywołują metody mutujące stan aplikacji, oraz mogą wywoływać inne metody asynchroniczne (np. stukanie do api)

I teraz wygląda mniej więcej to tak:

  1. Uruchamiasz aplikację, masz stan zerowy.
  2. Wywołujesz dwie metody:
  • zwracającego aktualny stan (getter) - zwracany jest stan zerowy (np. pusta tablica)
  • aktualizującą aktualny stan aplikacji (actions)
  1. Metoda aktualizująca stan aplikacji, stuka do api, po listę elementów. W przypadku udanego requestu, otrzymujemy listę, która przekazujemy do metody mutującej stan. W innym przypadku, zwracamy jakiś błąd
  2. Metoda mutująca stan, ustawia od nowa stan, zaś metoda zwracająca aktualny stan (getter) odnotowuje zmiany i zwraca nową listę.
  3. Dodając nowy element (lub usuwając), postępujemy analogiczne. Wywołujemy akcję dodająca (usuwającą) nowy element. Robiony jest request do api. API zwraca utworzony (lub usunięty) element. Utworzony (usunięty) element jest przekazywany do metody mutującej stan aplikacji, która dodaje (lub też usuwa) element do tablicy. Zaś getter zwraca zaktualizowaną listę.

Podsumowując, mamy:

  • 3 metody typu actions (pobierz wszystkie elementy, dodaj nowy element, usuń element)
  • 3 metody typu mutations (ustaw stan aplikacji od nowa, dodaj element, usuń element)
  • 1 metodę typu getter (zwróc aktualny stan aplikacji)
  • 1 klucz w obiekcie state, trzymająca aktualny stan aplikacji.
    Wszystkie te elementy są opakowane w jeden moduł :wink: