Considere un simple Vue blog:
Estoy usando Vuex como mi almacén de datos y necesito configurar dos captadores : un getPost
captador para recuperar una post
por ID, así como listFeaturedPosts
que los rendimientos de los primeros caracteres de cada puesto ofrecido. El esquema del almacén de datos para la lista de publicaciones destacadas hace referencia a las publicaciones por sus ID. Estas identificaciones deben resolverse en publicaciones reales con el fin de mostrar los extractos.
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
})
Según la documentación, el getters
parámetro se puede utilizar para acceder a otros captadores. Sin embargo, cuando intento acceder getters
desde adentro listFeaturedPosts
, está vacío y aparece un error en la consola debido a getters.getPost
que no está definido en ese contexto.
¿Cómo llamo getPost
como getter de Vuex desde adentro listFeaturedPosts
en el ejemplo anterior?
Probé sin
state
y no funcionó. Por esostate
es necesario.esto funciona:
esto no funcionó
fuente
state
objetogetters
e ignorando el segundo argumento, que sería elgetters
objeto real . Sigetters
hiciera una introspección en este ejemplo, vería que en realidad era su objeto de estado.Los getters reciben otros getters como segundo argumento
Aquí hay un enlace a los documentos oficiales: https://vuex.vuejs.org/guide/getters.html#property-style-access
fuente
en lugar de pasar del estado , pasar captadores y luego llamar a cualquier otro comprador desea. Espero eso ayude.
En tu tienda / getters.js
fuente
export default foo = ({ getters }) => { return getters.anyGetterYouWant }