Consider a simple Vue blog:
I'm using Vuex as my datastore and I need to set up two getters: a getPost
getter for retrieving a post
by ID, as well as a listFeaturedPosts
that returns the first few characters of each featured post. The datastore schema for the featured posts list references the posts by their IDs. These IDs need to be resolved to actual posts for the purposes of showing the excerpts.
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
})
According to the documentation, the getters
parameter can be used to access other getters. However, when I try to access getters
from inside listFeaturedPosts
, it's empty, and I get an error in the console due to getters.getPost
being undefined in that context.
How do I call getPost
as a Vuex getter from inside listFeaturedPosts
in the example above?
In VueJS 2.0, you must pass both state
and getters
.
Getters are passed to other getters as the 2nd Argument:
export default foo = (state, getters) => {
return getters.yourGetter
}
Official documentation: https://vuex.vuejs.org/guide/getters.html#property-style-access
Pass getters
as the second argument to access local and non-namespaced getters. For namespaced modules, you should use rootGetters
(as the 4th argument, in order to access getters defined within another module):
export default foo = (state, getters, rootState, rootGetters) => {
return getters.yourGetter === rootGetters['moduleName/getterName']
}
Getters receive other getters as the 2nd argument
getters: {
doneTodos: state => {
return state.todos.filter(todo => todo.done)
},
doneTodosCount: (state, getters) => {
return getters.doneTodos.length
}
}
Here is a link to the official docs - https://vuex.vuejs.org/guide/getters.html#property-style-access
I Tested without state
and didn't work. That's why state
is necessary.
this works:
export default foo = (state, getters) => {
return getters.yourGetter
}
this didn't work
export default foo = (getters) => {
return getters.yourGetter
}
state
object getters
and ignoring the second argument which would be the actual getters
object. If you were to introspect getters
in this example, you would see it was actually your state object.
instead of passing state, pass getters and then call any other getter you want. Hope it helps.
In your store/getters.js
export default foo = (getters) => {
return getters.anyGetterYouWant
}
export default foo = ({ getters }) => { return getters.anyGetterYouWant }
Success story sharing