Wie rufe ich einen Getter von einem anderen Getter in Vuex auf?

Stellen Sie sich ein einfaches Vue-Blog vor: Ich verwende Vuex als Datenspeicher und muss zwei Getter einrichten : einen getPostGetter zum Abrufen einer postID sowie einen Getter listFeaturedPosts, der die ersten Zeichen jedes vorgestellten Beitrags zurückgibt. Das Datenspeicherschema für die Liste der empfohlenen Beiträge verweist auf die Beiträge anhand ihrer IDs. Diese IDs müssen zum Anzeigen der Auszüge in tatsächliche Beiträge aufgelöst werden.

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

Gemäß der Dokumentation kann der gettersParameter verwendet werden, um auf andere Getter zuzugreifen. Wenn ich jedoch versuche, gettersvon innen darauf zuzugreifen listFeaturedPosts, ist es leer und es wird ein Fehler in der Konsole angezeigt, da getters.getPoster in diesem Kontext nicht definiert ist.

Wie rufe ich im obigen Beispiel getPostvon innen als Vuex-Getter auf listFeaturedPosts?

In VueJS 2.0 müssen Sie beide stateund übergeben getters.

Getter werden als 2. Argument an andere Getter übergeben :

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

Offizielle Dokumentation: https://vuex.vuejs.org/guide/getters.html#property-style-access

Übergeben Sie gettersals zweites Argument den Zugriff auf lokale und nicht namengebundene Getter. Für Module mit Namespace sollten Sie Folgendes verwenden rootGetters(als viertes Argument, um auf Getter zuzugreifen, die in einem anderen Modul definiert sind):

export default foo = (state, getters, rootState, rootGetters) => {
    return getters.yourGetter === rootGetters['moduleName/getterName']
}

Ich habe ohne getestet stateund nicht funktioniert. Deshalb stateist es notwendig.

das funktioniert:

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

das hat nicht funktioniert

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

Getter erhalten andere Getter als 2. Argument

getters: {
  doneTodos: state => {
    return state.todos.filter(todo => todo.done)
  },
  doneTodosCount: (state, getters) => {
    return getters.doneTodos.length
  }
}

Hier ist ein Link zu den offiziellen Dokumenten - https://vuex.vuejs.org/guide/getters.html#property-style-access

Anstatt den Status zu übergeben , übergeben Sie Getter und rufen Sie dann einen anderen Getter an, den Sie möchten. Ich hoffe es hilft.

In Ihrem Geschäft / getters.js

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