Używam vuex
i vuejs 2
razem.
Jestem nowy vuex
, chcę obserwować store
zmianę zmiennej.
Chcę dodać watch
funkcję w moimvue component
Oto, co mam do tej pory:
import Vue from 'vue';
import {
MY_STATE,
} from './../../mutation-types';
export default {
[MY_STATE](state, token) {
state.my_state = token;
},
};
Chcę wiedzieć, czy są jakieś zmiany w my_state
Jak oglądać store.my_state
w moim komponencie vuejs?
javascript
vue.js
vuejs2
vuex
raffffffff
źródło
źródło
Odpowiedzi:
Załóżmy na przykład, że masz kosz owoców i za każdym razem, gdy dodajesz lub usuwasz owoc z koszyka, chcesz (1) wyświetlić informacje o liczbie owoców, ale także (2) chcesz być powiadamiany liczenie owoców w jakiś fantazyjny sposób ...
fruit-count-component.vue
Zwróć uwagę, że nazwa funkcji w
watch
obiekcie musi odpowiadać nazwie funkcji wcomputed
obiekcie. W powyższym przykładzie nazwa tocount
.Nowe i stare wartości obserwowanej właściwości zostaną przekazane jako parametry do funkcji watch callback (funkcja count).
Sklep z koszykami mógłby wyglądać tak:
fruit-basket.js
Możesz przeczytać więcej w następujących zasobach:
źródło
watch
powinienem zrobić, gdy akcja powinna zostać podzielona na dwa etapy: 1) Po pierwsze, sprawdzenie, czy pożądane dane są buforowane i czy po prostu zwracają dane z pamięci podręcznej; 2) Jeśli pamięć podręczna nie powiodła się, potrzebuję akcji AJAX async, aby pobrać dane, ale wydaje się, że toaction
jest praca. Mam nadzieję, że moje pytanie będzie miało sens, dziękuję!Nie należy używać obserwatorów składnika do nasłuchiwania zmiany stanu. Zalecam użycie funkcji getters, a następnie zmapowanie ich wewnątrz komponentu.
W Twoim sklepie:
Powinieneś być w stanie wysłuchać wszelkich zmian wprowadzonych w Twoim sklepie za pomocą
this.myState
komponentu.https://vuex.vuejs.org/en/getters.html#the-mapgetters-helper
źródło
To tak proste, jak:
źródło
function(n) { console.log(n); }
Jak wspomniano powyżej, nie jest dobrym pomysłem obserwowanie zmian bezpośrednio w sklepie
Ale w bardzo rzadkich przypadkach może to być dla kogoś przydatne, więc zostawię tę odpowiedź. W innych przypadkach zobacz odpowiedź @ gabriel-robert
Możesz to zrobić przez
state.$watch
. Dodaj to do swojejcreated
(lub tam, gdzie potrzebujesz tego do wykonania) metody w komponencieWięcej szczegółów: https://vuex.vuejs.org/api/#watch
źródło
Myślę, że pytający chce używać zegarka z Vuex.
źródło
To jest dla wszystkich ludzi, którzy nie mogą rozwiązać swojego problemu z getterami i naprawdę potrzebują obserwatora, np. Aby porozmawiać z rzeczami stron trzecich niezwiązanymi z vue (patrz Vue Watchers kiedy używać obserwatorów).
Obserwatory i obliczone wartości komponentu Vue również działają na obliczonych wartościach. Więc nie inaczej jest z vuex:
jeśli chodzi tylko o połączenie stanu lokalnego i globalnego, dokument mapState zawiera również przykład:
źródło
jeśli używasz maszynopisu, możesz:
źródło
Utwórz lokalny stan zmiennej sklepu, obserwując i ustawiając zmiany wartości. Taka, że zmienna lokalna zmienia się dla modelu v-wejściowego formularza, nie powoduje bezpośredniej mutacji zmiennej magazynu .
źródło
Najlepszym sposobem obserwowania zmian w sklepie jest użycie
mapGetters
tak, jak powiedział Gabriel. Ale jest taki przypadek, kiedy nie da się tego zrobićmapGetters
np. Chcesz coś pobrać ze sklepu za pomocą parametru:w takim przypadku nie możesz użyć
mapGetters
. Zamiast tego możesz spróbować zrobić coś takiego:Ale niestety
todoById
zostanie zaktualizowany tylko wtedy, gdythis.id
zostanie zmienionyJeśli chcesz zaktualizować komponenty, skorzystaj z
this.$store.watch
rozwiązania dostarczonego przez Gong . Lub zarządzaj komponentem świadomie i aktualizuj,this.id
gdy zajdzie potrzebatodoById
.źródło
Jeśli chcesz po prostu oglądać do własności państwowej , a następnie działać w ramach komponentu odpowiednio do zmian tej nieruchomości następnie patrz przykład poniżej.
W
store.js
:W tym scenariuszu tworzę
boolean
właściwość stanu, którą zamierzam zmienić w różnych miejscach aplikacji, tak jak poniżej:Teraz, jeśli muszę obserwować tę właściwość stanu w innym komponencie, a następnie zmienić właściwość lokalną, napisałbym w
mounted
haku:Najpierw ustawiam obserwatora na właściwości stanu, a następnie w funkcji wywołania zwrotnego używam
value
właściwości tej właściwości, aby zmienićlocalProperty
.Mam nadzieję, że to pomoże!
źródło
Jeśli chcesz oglądać na poziomie stanu, możesz to zrobić w następujący sposób:
źródło
store.state
zmian przezdispatch
działanie stanu ze składnika, ponieważ to zachowanie działa tylko wtedy, gdy używasz tego składnika. Możesz również zakończyć nieskończoną pętlą. Zegarekstore.state
zmienić rzadko korzystają, na przykład, jeśli masz komponent lub stronę, która powinna zrobić jakąś akcję w oparciu ostore.state
zmieniły, że nie mógł obsługiwane przez korzystając obliczane mapState tylko tam, gdzie nie można porównaćnewValue
vsoldValue
store.dispatch
? jeśli chcesz obsłużyćstore.state
zmianę dlastore' why not handle it inside
store.mutations`?store.dispatch
najpierw używam . Na przykład chcę pobrać wszystkie miasta z kraju za każdym razem$store.state.country
, gdy się zmieni, więc dodaję to do obserwatora. Wtedy napisałbym wezwanie Ajax:store.dispatch('fetchCities')
piszę:axios.get('cities',{params:{country: state.country }}).then(response => store.commit('receiveCities',response) )
Można użyć kombinacji Vuex działań , pochłaniacze , obliczonych właściwości i obserwatorów słuchać zmian na wartości państwowego Vuex.
Kod HTML:
Kod JavaScript:
Zobacz demo JSFiddle .
źródło
Możesz również zapisać się na mutacje sklepu:
https://vuex.vuejs.org/api/#subscribe
źródło
Wewnątrz komponentu utwórz obliczoną funkcję
Teraz można obserwować obliczoną nazwę funkcji, np
Zmiany dokonane w
vuex
staniemy_state
zostaną odzwierciedlone w obliczonej funkcjimyState
i wyzwolą funkcję zegarka.Jeśli stan
my_state
ma zagnieżdżone dane,handler
opcja pomoże bardziejSpowoduje to obejrzenie wszystkich zagnieżdżonych wartości w sklepie
my_state
.źródło
Możesz także użyć mapState w komponencie vue, aby bezpośrednio pobrać stan ze sklepu.
W twoim komponencie:
Gdzie
my_state
jest zmienna ze sklepu.źródło
źródło
Użyłem w ten sposób i działa:
store.js:
mutations.js
działania.js
getters.js
A w komponencie, w którym używasz stanu ze sklepu:
Gdy użytkownik przesyła formularz, zostanie wywołana akcja STORE , po pomyślnym utworzeniu mutacja CREATE_SUCCESS zostanie zatwierdzona . Włącz createSuccess ma wartość true, aw komponencie watcher zobaczy zmianę wartości i wyzwoli powiadomienie.
isSuccess powinno być zgodne z nazwą zadeklarowaną w getters.js
źródło