web-dev-qa-db-fra.com

Comment appeler un getter d'un autre getter dans Vuex?

Considérons un simple blog Vue:
J'utilise Vuex comme magasin de données et je dois configurer deux getters : un getPost getter pour récupérer une post par ID, ainsi qu'une listFeaturedPosts qui renvoie les premiers caractères de chaque publication sélectionnée. Le schéma de banque de données de la liste des publications en vedette fait référence aux publications par leur ID. Ces identifiants doivent être résolus en messages réels pour pouvoir 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 paramètre getters peut être utilisé pour accéder à d'autres accesseurs. Cependant, lorsque j'essaie d'accéder à getters de l'intérieur de listFeaturedPosts, il est vide et j'obtiens une erreur dans la console car getters.getPost n'est pas défini dans ce contexte.

Comment appeler getPost en tant que getter Vuex depuis listFeaturedPosts dans l'exemple ci-dessus?

vuejs2vuex
22
jSepia

La réponse d'Angie est proche ....

Dans VueJS 2.0, vous passerez state et getters. Cela devrait donc fonctionner dans store/getters.js :

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

J'ai testé sans state et je n'ai pas fonctionné depuis 2.5.16. C'est pourquoi state 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
}
6
Jose Seie

Passez getters en tant que deuxième argument pour accéder aux getters locaux et non-namespaced. Pour les modules namespaced, vous devez utiliser rootGetters (en tant qu'argument 4th , 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']
}
0
bruddha