Considérez 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 un post
par ID, ainsi qu'un listFeaturedPosts
qui 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 getters
paramètre peut être utilisé pour accéder à d'autres getters. Cependant, lorsque j'essaie d'accéder getters
de l'intérieur listFeaturedPosts
, il est vide et j'obtiens une erreur dans la console car il getters.getPost
n'est pas défini dans ce contexte.
Comment appeler en getPost
tant que getter Vuex de l'intérieur listFeaturedPosts
dans l'exemple ci-dessus?
J'ai testé sans
state
et n'a pas fonctionné. C'est pourquoistate
c'est nécessaire.cela marche:
cela n'a pas fonctionné
la source
state
objetgetters
et ignorez le deuxième argument qui serait l'getters
objet réel . Si vous deviez introspectergetters
dans cet exemple, vous verriez qu'il s'agissait en fait de votre objet d'état.Les getters reçoivent d'autres getters comme deuxième argument
Voici un lien vers la documentation officielle - https://vuex.vuejs.org/guide/getters.html#property-style-access
la source
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
la source
export default foo = ({ getters }) => { return getters.anyGetterYouWant }