2017-09-14 2 views
2

Betrachten Sie einen einfachen Vue Blog. Ich benutze Vuex als meinen Datenspeicher und ich muss zwei getters einrichten: eine getPost Getter zum Abrufen einer post von ID, sowie eine listFeaturedPosts, die die ersten paar Zeichen von jedem Featured Post zurückgibt. Das Datenspeicherschema für die Liste der aufgeführten Posts verweist auf die Posts anhand ihrer IDs. Diese IDs müssen zu tatsächlichen Posts aufgelöst werden, um die Auszüge anzuzeigen.Wie rufe ich einen Getter von einem anderen Getter in Vuex?

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 
}) 

Accordin In der Dokumentation kann der Parameter getters für den Zugriff auf andere Getter verwendet werden. Jedoch, wenn ich versuche, auf getters von innerhalb listFeaturedPosts zuzugreifen, ist es leer, und ich bekomme einen Fehler in der Konsole aufgrund getters.getPost in diesem Kontext nicht definiert ist.

Wie rufe ich im obigen Beispiel getPost als Vuex Getter von innen listFeaturedPosts?

Antwort

4

Angies Antwort liegt in der Nähe ....

In VueJS 2.0, werden Sie state und getters passieren. So sollte dies funktionieren in store/getters.js:

export default foo = (state, getters) => { 
    return getters.yourGetter 
} 
1

anstelle von state, pass getters und dann rufen Sie einen anderen Getter Sie wollen. Ich hoffe es hilft.

In Ihrem Shop/getters.js

export default foo = (getters) => { 
    return getters.anyGetterYouWant 
} 
Verwandte Themen