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

Question

Considérons un simple blog Vue :
J'utilise Vuex comme base de données et j'ai besoin de mettre en place deux systèmes de gestion des données. getters : a getPost pour récupérer un post par ID, ainsi qu'un listFeaturedPosts qui renvoie les premiers caractères de chaque article vedette. Le schéma du datastore pour la liste des articles vedettes référence les articles par leurs ID. Ces ID doivent être résolus en articles réels afin d'afficher les extraits.

magasin/état.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',
  ]
}

magasin/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);
}

magasin/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 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 en raison de getters.getPost étant indéfini dans ce contexte.

Comment puis-je appeler getPost comme un getter Vuex à l'intérieur listFeaturedPosts dans l'exemple ci-dessus ?

Answer 1

Dans VueJS 2.0, vous devez transmettre les deux éléments suivants state y getters .

Les getters sont transmis à d'autres getters en tant qu'éléments d'information. 2eme Argument :

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

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

Answer 2

Passez getters comme deuxième argument pour accéder aux getters locaux et non-nominatifs. Pour les modules à espacement de noms, vous devez utiliser rootGetters (comme le 4ème afin d'accéder à des getters définis dans un autre module) :

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

Answer 3

Les getters reçoivent d'autres getters comme le 2è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

Answer 4

J'ai testé sans state et n'a pas fonctionné. C'est pourquoi state est nécessaire.

ça marche :

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

cela n'a pas fonctionné

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

Answer 5

Au lieu de passer état , passe getters et ensuite appeler n'importe quel autre getter que vous voulez. J'espère que cela vous aidera.

Dans votre magasin/getters.js

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