I have a problem using rootGetters in Nuxt.js

Question

I think it's a problem with rootGetters or data types.

// sheet.js

// character = Object
// number = 100

export const getters = {
  getNumber: state => {
    return Number(state.character.number); // its return 100
  }
};

and called getNumber to preview.js.

// preview.js
export const state = () => ({
  dummy: 0
});


export const getters = {
  numberIs: (state, rootGetters) => {
    return Math.round(state.dummy + rootGetters["sheet/getNumber"]); // undefined
  }
};

and numberIs return undefined. What did I miss?

Answer 1

The order of the parameters matters. Vuex getter signature is (state, getters, rootState, rootGetters), so currently what you think is rootGetters is actually just getters.

https://vuex.vuejs.org/guide/modules.html#accessing-global-assets-in-namespaced-modules

It's a little bit deceptive because of how actions pass in the context-object, where you can pick and choose what you want to use. Here you must use 4 parameters to get to rootGetters. (Or parse it out from arguments)

  numberIs: (state, _whatever, _idontcare, rootGetters) => {
    return Math.round(state.dummy + rootGetters["sheet/getNumber"]); 
  }