Vuex not returning submodule's getters

Question

I have a following store structure:

In order to access the orders getter (here Array[0]) I used: store.getters['pages/my/orders/orders'] and it worked on Nuxt 2 (Vue 2).

After refactoring to Vue 3 (Vuex 4) I can only get getters from shallowly nested modules, i.e:

store.getters['auth/isLoggedIn'] // works, returns the getter
store.getters['pages/my/orders/orders'] // is undefined despite being shown in Vue DevTools

In fact store.getters doesn't have any pages getters, it only returns root getters, or module getters (but not submodules).

Edit: Sometimes it takes writing it down to notice the issue. pages/my/orders/orders is indeed technically not a getter, but a part of the state. But how come then store.getters['pages/my/orders/orders'] worked on Nuxt?

Edit 2: actually we do have orders getter inside pages/my/orders as well, I don't know why Vue DevTools is not showing it :/

Answer 1

Turns out namespaced: true needs to be in every single module that has submodules. Without it submodule getters are not taken into account. It's very easy to overlook as there is no warning or error.

So in my case to be able to access store.getters['pages/my/orders/orders'] I had to add to pages, my, orders modules:

export default {
  namespaced: true, // this was missing
  modules: {
    ...submodules
  }