Jak wywołać getter z innego gettera w Vuex?

Rozważmy prosty blog Vue:
używam Vuex jako mojego magazynu danych i muszę skonfigurować dwa gettery : getPostpobierający do pobierania postwedług identyfikatora oraz listFeaturedPostszwracają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 gettersparametru można uzyskać dostęp do innych metod pobierających. Jednak kiedy próbuję uzyskać dostęp gettersod wewnątrz listFeaturedPosts, jest pusta i pojawia się błąd w konsoli z powodu getters.getPostniezdefiniowania w tym kontekście.

Jak wywołać getPostfunkcję pobierającą Vuex od wewnątrz listFeaturedPostsw powyższym przykładzie?

W VueJS 2.0 musisz przejść zarówno statei getters.

Metody pobierające są przekazywane innym pobierającym jako drugi argument :

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

Oficjalna dokumentacja: https://vuex.vuejs.org/guide/getters.html#property-style-access

Przekaż gettersjako drugi argument, aby uzyskać dostęp do metod pobierających lokalnych i bez przestrzeni nazw. W przypadku modułów z przestrzenią nazw należy użyć rootGetters(jako czwartego argumentu, aby uzyskać dostęp do metod pobierających zdefiniowanych w innym module):

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

Testowałem bez statei nie działało. Dlatego jest stateto konieczne.

to działa:

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

to nie zadziałało

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

Metody pobierające otrzymują inne metody pobierające jako drugi argument

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

Oto link do oficjalnej dokumentacji - https://vuex.vuejs.org/guide/getters.html#property-style-access

zamiast przekazywać stan , przekaż getters, a następnie wywołaj dowolny inny getter. Mam nadzieję, że to pomoże.

W Twoim sklepie / getters.js

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