Rozważmy prosty blog Vue:
używam Vuex jako mojego magazynu danych i muszę skonfigurować dwa gettery : getPost
pobierający do pobierania post
według identyfikatora oraz listFeaturedPosts
zwracający kilka pierwszych znaków każdego polecanego postu. Schemat magazynu danych dla listy polecanych postów odwołuje się do postów według ich identyfikatorów. Te identyfikatory muszą być zamienione na rzeczywiste posty w celu pokazania fragmentów.
store / state.js
export const state = {
featuredPosts: [2, 0],
posts: [
'Lorem et ipsum dolor sit amet',
'Lorem et ipsum dolor sit amet',
'Lorem et ipsum dolor sit amet',
'Lorem et ipsum dolor sit amet',
'Lorem et ipsum dolor sit amet',
]
}
store / getters.js
export default getPost = (state) => (postID) => {
return state.posts[postID]
}
export default listFeaturedPosts = (state, getters) => () => {
console.log(getters) // {}
return state.featuredPosts.map(postID => getters.getPost(postID).substring(0, EXCERPT_LENGTH);
}
store / index.js
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import * as getters from './getters'
import * as mutations from './mutations'
Vue.use(Vuex)
export default new Vuex.Store({
state,
getters,
mutations
})
Zgodnie z dokumentacją za pomocą tego getters
parametru można uzyskać dostęp do innych metod pobierających. Jednak kiedy próbuję uzyskać dostęp getters
od wewnątrz listFeaturedPosts
, jest pusta i pojawia się błąd w konsoli z powodu getters.getPost
niezdefiniowania w tym kontekście.
Jak wywołać getPost
funkcję pobierającą Vuex od wewnątrz listFeaturedPosts
w powyższym przykładzie?
Testowałem bez
state
i nie działało. Dlatego jeststate
to konieczne.to działa:
to nie zadziałało
źródło
state
obiektgetters
i ignorujesz drugi argument, który byłby rzeczywistymgetters
obiektem. Gdybyś miał przeprowadzić introspekcjęgetters
w tym przykładzie, zobaczyłbyś, że faktycznie był to twój obiekt stanu.Metody pobierające otrzymują inne metody pobierające jako drugi argument
Oto link do oficjalnej dokumentacji - https://vuex.vuejs.org/guide/getters.html#property-style-access
źródło
zamiast przekazywać stan , przekaż getters, a następnie wywołaj dowolny inny getter. Mam nadzieję, że to pomoże.
W Twoim sklepie / getters.js
źródło
export default foo = ({ getters }) => { return getters.anyGetterYouWant }