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

92


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?

Benutzer wurde nicht gefunden
quelle

Antworten:

17

Ü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']
}
Ego
quelle
3
Dies ist nützlich für Personen, die einen Getter von einem anderen Vuex-Modul benötigen. Ich wollte nur betonen, dass die Argumente in der in der Antwort angegebenen Reihenfolge vorliegen müssen, ohne dass Argumente ausgelassen werden, damit sie funktionieren.
LJH
13

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
}
Jose Seie
quelle
1
Ich möchte hinzufügen, dass es in keiner Vue-Version funktioniert. Die Objektzerstörung sollte nicht mit benannten Argumenten verwechselt werden (siehe Antwort im ursprünglichen Vorschlag, 'Zustand' wegzulassen). Es ist in der Tat (Zustand, Getter)
Igor Zinken
1
Im zweiten Beispiel benennen Sie das stateObjekt gettersund ignorieren das zweite Argument, das das eigentliche gettersObjekt wäre. Wenn Sie gettersin diesem Beispiel nach innen schauen würden, würden Sie sehen, dass es sich tatsächlich um Ihr Statusobjekt handelt.
mraaroncruz
10

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

OziOcb
quelle
2
Daumen hoch für: a) ein klares Codebeispiel b) Link zum richtigen Ort in den Dokumenten
Katinka Hesselink
1
Ist es anders, stattdessen so zu schreiben? getters: {doneTodos: state => {return state.todos.filter (todo => todo.done)}, doneTodosCount: (state, getters) => {return this.getters.doneTodos.length}}
Rivo
@Rivo soweit ich weiß kannst du das nicht. Wenn Sie versuchen, erhalten Sie eine Fehlermeldung wie die folgende: [Vue warn]: Fehler beim Rendern: "TypeError: Eigenschaft 'getters' von undefined kann nicht gelesen werden"
OziOcb
-3

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
}
Angie
quelle
1
Ich denke, Sie verwechseln die Objektzerstörung mit Argumenten. Das erste Argument für die Funktion ist der Status, das zweite ist das Getter-Objekt. Sie können das erste Argument "Getter" nennen, aber es wird immer noch der Zustand sein! Sie suchen: export default foo = (state, getters) => ...
Igor Zinken
Oderexport default foo = ({ getters }) => { return getters.anyGetterYouWant }
GaryMcM