web-dev-qa-db-de.com

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

Betrachten Sie ein einfaches Vue-Blog:
Ich verwende Vuex als meinen Datastore und muss zwei getters : a getPost getter einrichten, um eine post nach ID abzurufen, sowie eine listFeaturedPosts, die die ersten paar Zeichen jedes gekennzeichneten Beitrags zurückgibt. Das Datastore-Schema für die Liste der gekennzeichneten Beiträge verweist auf die Beiträge anhand ihrer IDs. Diese IDs müssen für die Anzeige der Auszüge in tatsächliche Posten 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 Parameter getters für den Zugriff auf andere Getter verwendet werden. Wenn ich jedoch versuche, auf getters von innen listFeaturedPosts zuzugreifen, ist er leer und ich bekomme einen Fehler in der Konsole, weil getters.getPost in diesem Kontext undefiniert ist.

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

vuejs2vuex
22
jSepia

Angies Antwort ist nahe ...

In VueJS 2.0 übergeben Sie state und getters. Das sollte also in store/getters.js funktionieren:

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

Ich habe ohne state getestet und funktionierte in vuejs 2.5.16 nicht. Deshalb ist state notwendig.

das funktioniert:

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

das hat nicht funktioniert

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

Getter erhalten andere Getter als das 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

2
OziOcb

Übergeben Sie getters als zweites Argument, um auf lokale und nicht im Namensraum befindliche Getter zuzugreifen. Für Module mit Namensbereich sollten Sie rootGetters verwenden (als Argument 4th , um auf in einem anderen Modul definierte Getter zuzugreifen):

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