Comment appeler un getter depuis un autre getter dans Vuex?

Considérez un simple blog Vue:
j'utilise Vuex comme magasin de données et je dois configurer deux getters : un getPostgetter pour récupérer un postpar ID, ainsi qu'un listFeaturedPostsqui renvoie les premiers caractères de chaque article présenté. Le schéma du magasin de données pour la liste des articles en vedette fait référence aux articles par leur ID. Ces identifiants doivent être résolus en messages réels afin d'afficher les extraits.

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

Selon la documentation, le gettersparamètre peut être utilisé pour accéder à d'autres getters. Cependant, lorsque j'essaie d'accéder gettersde l'intérieur listFeaturedPosts, il est vide et j'obtiens une erreur dans la console car il getters.getPostn'est pas défini dans ce contexte.

Comment appeler en getPosttant que getter Vuex de l'intérieur listFeaturedPostsdans l'exemple ci-dessus?

Dans VueJS 2.0, vous devez passer à la fois stateet getters.

Les getters sont passés à d'autres getters en tant que deuxième argument :

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

Documentation officielle: https://vuex.vuejs.org/guide/getters.html#property-style-access

Passez getterscomme deuxième argument pour accéder aux getters locaux et sans espace de nom. Pour les modules d'espacement de noms, vous devez utiliser rootGetters(comme 4ème argument, afin d'accéder aux getters définis dans un autre module):

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

J'ai testé sans stateet n'a pas fonctionné. C'est pourquoi statec'est nécessaire.

cela marche:

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

cela n'a pas fonctionné

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

Les getters reçoivent d'autres getters comme deuxième argument

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

Voici un lien vers la documentation officielle - https://vuex.vuejs.org/guide/getters.html#property-style-access

au lieu de passer l' état , passez les getters puis appelez tout autre getter de votre choix. J'espère que cela aide.

Dans votre magasin / getters.js

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