What is the Vuex "context" object?

Question

I am trying to get better understanding of what the "context" object is in Vuex.

The context object is referred to numerous times in the Vuex documentation. For example, in https://vuex.vuejs.org/en/actions.html, we have:

Action handlers receive a context object which exposes the same set of methods/properties on the store instance, so you can call context.commit to commit a mutation...

I understand how to use it, and also that we can use destructuring if we only want to use the "commit" from the context object, but was hoping for a little more depth, just so I can better understand what is going on.

As a start, I found a couple ~8.5 year old posts on the "context object" as a pattern: what is context object design pattern? and Can you explain the Context design pattern?

However, specifically to Vuex, I'd love a better understanding of:

What is the context object / what is its purpose?
What are all the properties/methods that it is making available to use in Vuex?

Thank you!

score 37 · Accepted Answer · answered Nov 15 '17 at 08:59

37

From the documentation you pointed out you can read:

We will see why this context object is not the store instance itself when we introduce Modules later.

The main idea of the context object is to abstract the scope of the current Module. If you simply access store.state, it will always be the root state.

The context object of actions and its properties/methods are described here in the source code and also referenced in the API documentation

Here is the list:

{
  state,      // same as store.state, or local state if in modules
  rootState,  // same as store.state, only in modules
  commit,     // same as store.commit
  dispatch,   // same as store.dispatch
  getters,    // same as store.getters, or local getters if in modules
  rootGetters // same as store.getters, only in modules
}

answered Nov 15 '17 at 08:59

rayfranco

3,630
3
26
38

1

This list is right on, thank you! In the docs see the line "when we introduce Modules later" but could not find the "later." I'm a bit more lost in the source, but it is also helpful, thx. So is it basically just another object that is being created by Vuex, to emulate some of the functionality of the instance, so that those properties/methods can be made available elsewhere? (If you would word it differently, please correct me). – Kobi Nov 15 '17 at 09:26
2

I would simply say an object with shortcuts scoped to current module so you don't have to search for it (nor even know its name). So you can use `context.state` or even directly `state` instead of `this.$store[moduleName].state` for example :) – rayfranco Nov 15 '17 at 12:07
Didn't even know that existed (that greyed-out checkmark looks like a shadow on the down button). Between your original response and your comment "object with shortcuts scoped to current module..." you definitely answered it. Accepted, thanks @rayfranco! PS- You might want to edit your original response to include your comment, but accepted either way. – Kobi Nov 18 '17 at 04:41

Decade Moon · Answer 2 · 2017-11-15T09:01:35.493

5

As a start, I found a couple ~8.5 year old posts on the "context object" as a pattern ...

I think you're reading into it too much.

I don't think the Vuex docs is referring to some specific kind of "context object" that is known and defined elsewhere, they just mean that the object that is passed to action handlers (and in other situations as described in the docs) is a custom object which they refer to as a "context" object by their own definition.

The reason why they provide this object is because it contains properties that are specific to the module for that particular action handler.

edited Nov 15 '17 at 09:01

answered Nov 15 '17 at 08:56

Decade Moon

32,968
8
81
101

3

regarding: "I think you're reading into it too much." Good clarification, thank you!! Yes, I was trying to search for relevant explanations. Definitely don't want to be going down the wrong path. [No sarcasm, in case it comes off that way in text.] – Kobi Nov 15 '17 at 09:18
it's literally a "context" object inside each module though... You can find it if you look at the store object in console log. – mesqueeb Jul 04 '18 at 05:46

score 1 · Answer 3 · answered Mar 19 '20 at 11:10

1

according to the source code of vuex, context is just a literal object with some properties from local, and other properties from store.

answered Mar 19 '20 at 11:10

Pale Blue Dot

32
5

What is the Vuex "context" object?

3 Answers3