Pytanie Strukturyzacja projektu Vue + Vuex


Jestem niejasno tutaj, gdzie umieścić moje globalne funkcje. W wielu przykładach plik main.js wskazuje na składnik aplikacji i jest umieszczony gdzieś w html. Ten przepływ pracy byłby dla mnie w porządku, gdybym po prostu zawierał całą moją logikę w tym komponencie aplikacji. Ale łączę komponenty z funkcjonalnością Laravel, więc to nie działa dla mnie.

Obecnie mój plik main.js zawiera kilka metod, które muszę mieć dostęp z dowolnego miejsca w mojej aplikacji. Metody te nie zawierają żadnych zdarzeń rozgłaszania, więc można je skutecznie umieścić w dowolnym miejscu, o ile otrzymują instancję vue-resource.

Mój plik main.js:

https://github.com/stephan-v/BeerQuest/blob/develop/resources/assets/js/main.js

Mam nadzieję, że ktoś może mi powiedzieć, gdzie mógłbym umieścić moje metody przyjaźni, gdybym używał vuex lub ogólnie, ponieważ nie wydaje się to najlepszą praktyką w ogóle.

Dziękuję Ci.


14
2018-06-28 09:28


pochodzenie




Odpowiedzi:


Vuex zarządza wszystkimi danymi w twojej aplikacji. Jest to "jedno źródło prawdy" dla danych na twoim front-endie. Dlatego wszystko, co zmienia stan aplikacji, takie jak dodanie znajomego lub odmowa przyjaciela, musi przepłynąć przez Vuex. Dzieje się tak poprzez trzy główne typy funkcji, pobierające, akcje i mutacje.

Sprawdzić: https://github.com/vuejs/vuex/tree/master/examples/shopping-cart/vuex

Gettery służą do pobierania danych z magazynu w Vuex. Są reaktywne wobec zmian, co oznacza, że ​​jeśli dane Vuex ulegną zmianie, informacje w twoim komponencie również zostaną zaktualizowane. Możesz umieścić je w czymś podobnym getters.js dzięki czemu można je zaimportować do dowolnego modułu, w którym są potrzebne.

Akcje są funkcjami, które wywołujesz bezpośrednio, tj. acceptFriendRequest kiedy użytkownik kliknie przycisk. Komunikują się z twoją bazą danych, a następnie wysyłają mutacje. W tej aplikacji wszystkie akcje są w actions.js.

Więc zadzwonisz this.acceptFriendRequest(recipient) w twoim komponencie. Dzięki temu twoja baza danych zaktualizuje status przyjaciela, a następnie otrzymasz potwierdzenie, że tak się stało. To wtedy wysyłamy mutację, która aktualizuje listę przyjaciół obecnych użytkowników w Vuex.

Mutacja aktualizuje dane w Vuex, aby odzwierciedlić nowy stan. Gdy tak się stanie, wszystkie dane pobierane w programie pobierającym są również aktualizowane. Oto przykład całego przepływu:

import {addFriend} from './actions.js';
import {friends} from './getters.js';
new Vue({
  vuex:{
    getters:{
      friends
    }
  },
  methods:{
    addFriend
  }
}

store.js:

export default {
  state:{
    friends: []
  },
  mutations:{
    ADD_FRIEND(state, friend) {
      state.friends.push(friend);
    }
  }
}

actions.js:

export default {
  addFriend(friend){
    Vue.http.post('/users/1/friends',friend)
      .then((response)=>{
        dispatch("ADD_FRIEND", response) //response is the new friend
      })
  }
}

getters.js

export default {
  friends(state) {
    return state.friends;
  }
}

Wszystkie te elementy są podzielone na własne pliki i można je zaimportować do dowolnego komponentu, którego potrzebujesz. Możesz zadzwonić this.addFriend(friend) z dowolnego komponentu, a następnie z Twojego gettera, do którego można uzyskać dostęp this.friends automatycznie zaktualizuje się z nowym przyjacielem, gdy dojdzie do mutacji. Zawsze możesz użyć tych samych danych w dowolnym widoku w aplikacji i wiedzieć, że są one aktualne w Twojej bazie danych.

Kilka różnych rzeczy:

  • gettery automatycznie otrzymują state jako zmienna, dzięki czemu zawsze możesz odwołać się do stanu Twojego sklepu Vuex
  • mutacje nigdy nie powinny być asynchroniczne. Wykonuj pobieranie / aktualizację w akcjach, a następnie wysyłaj mutacje, aby zaktualizować swoje dane
  • tworzenie usług (lub zasobów) przy użyciu Vue Resource sprawi, że pobieranie / aktualizowanie / usuwanie zasobów będzie jeszcze łatwiejsze. możesz umieścić je w osobnych plikach i zaimportować je do swojego actions.js aby zachować logikę pobierania bazy danych oddzieloną. Wtedy piszesz coś w stylu FriendService.get({id: 1}) zamiast Vue.http.get('/users/1'). widzieć https://github.com/vuejs/vue-resource/blob/master/docs/resource.md
  • Vuex współpracuje z devamiols vue dla "podróży w czasie". Możesz zobaczyć listę wszystkich mutacji, które miały miejsce i przewinąć je / przerobić. Jest świetny do debugowania i sprawdzania, gdzie dane są zmieniane.

23
2018-06-28 11:27



Dzięki za długie wyjaśnienia i pomoc mi tutaj, wiele dla mnie znaczy. Tylko pytanie; w tym przypadku metody połączeń API przyjaźni nie muszą w rzeczywistości aktualizować magazynu vuex. Te wywołania po prostu wysyłają niezależne żądanie do punktu końcowego api. Inne części mojej aplikacji będą jednak używać vuex. Czy nadal zaleca się robić to tak, jak zasugerowałeś, gdy metody te nie wymagają aktualizacji sklepu? - Stephan-v
Jeśli w twojej aplikacji jest jakikolwiek inny widok, który chciałby poznać listę znajomych, wtedy skorzystanie z Vuex byłoby rozwiązaniem. Wtedy nie musisz ponownie pobierać listy znajomych w różnych miejscach i zawsze wiesz, że jesteś zsynchronizowany z bazą danych. Ale jeśli jest to więcej niż potrzebujesz, wówczas zaangażowanie Vuex byłoby tylko dodatkową pracą. W takim przypadku chciałbym po prostu stworzyć coś takiego /services/Friends.js który ma wszystkie funkcje zarządzania przyjaźniami, więc możesz zaimportować go w dowolnym miejscu. - Jeff
Jeśli je oddzielisz (dane vuex i dane lokalne), gdzie należy przechowywać logikę bazy danych, aby pobrać dane z interfejsu API? Nie myślę w katalogu Vuex? W oddzielnym katalogu o nazwie api? - Jordy
Czy powinienem używać tylko katalogu / services / dla skryptów dla komponentów, które nie używają Vuex? Czy powinienem użyć tego katalogu dla wszystkich komponentów jako globalnego katalogu działań? A jeśli to konieczne, zaktualizuj Vuexa z tego skryptu? - Jordy