Nuxt.js: [Vuex] this.state inside actions is undefined

[IPRIT]

Version

v2.4.3

Reproduction link

https://imsorry.but.icant/setup/nuxt

Steps to reproduce

1. Create vuex store
2. Create action
3. Output this.state in the action
4. Dispatch the action
5. You will see undefined in your console

What is expected ?

In previous versions (<2.4.0) I had access to the global state in any action simply writing this.state.

What is actually happening?

Now I can't get this and I only have access to the local state (from action's arguments).

Additional comments?

Is it a bug or a proper behavior? I'm using a classic mode and I really need this mode. Don't even suggest to switch in nuxt's option. My company using classic mode because we have a huge number of actions and modules, and our modules splitting up by folders. Each folder consists 5-6 files (actions.js, state.js, mutations.js, getters.js, index.js[, modules.js])

_{This bug report is available on Nuxt community (#c8645)}

[manniL]

Your actions should never use this.state. Instead, use state given by the action ctx.

yourAction({commit, state}) {
  state.something
}

[manniL]

A word to the favored store approach:

My company using classic mode because we have a huge number of actions and modules, and our modules splitting up by folders.

That's exactly what you can do with the modularized store mode provided by nuxt.

Each folder consists 5-6 files (actions.js, state.js, mutations.js, getters.js, index.js)

Same here: This is exactly what Nuxt enables here 😮

Imagine you have a module called "cart".
You could split stuff up as:

• store/cart/index.js
• store/cart/actions.js
• store/cart/getters.js

and so on.
Each file has to use a default export.

Nested modules are also possible 🤷‍♂️

• store/cart/products/index.js
• store/cart/products/getters.js

[IPRIT]

@manniL How can I access state from different module inside action? For example I have region subdomain stored in the module named region and I need this subdomain inside another module.

[manniL]

@IPRIT not related to nuxt. see https://vuex.vuejs.org/guide/modules.html#module-local-state ;)

[IPRIT]

@manniL Oh, thank you. I didn't see that I have rootState inside the action.

[begueradj]

It is better to use state in mutations, not in actions.

[trainoasis]

How do you approach then when you have an action that calls multiple mutations. Then you need to update a certain SUM value for example based on state values. Should you do calculations in a mutation ? Doesnt sound right since action is the place where functionality happens, mutations just directly change state, that's all, no?