How do I call a getter from another getter in Vuex?

Vuejs2Vuex

Vuejs2 Problem Overview


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?

Vuejs2 Solutions


Solution 1 - Vuejs2

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

Solution 2 - Vuejs2

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']
}

Solution 3 - Vuejs2

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

Solution 4 - Vuejs2

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
}

Solution 5 - Vuejs2

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
}

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionUser not foundView Question on Stackoverflow
Solution 1 - Vuejs2whusterjView Answer on Stackoverflow
Solution 2 - Vuejs2egoView Answer on Stackoverflow
Solution 3 - Vuejs2OziOcbView Answer on Stackoverflow
Solution 4 - Vuejs2Jose SeieView Answer on Stackoverflow
Solution 5 - Vuejs2AngieView Answer on Stackoverflow