What is the Vuex "context" object?

user_4316984 0
Viewed 20982

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:

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

Thank you!

vuejs2 vuex vue.js
3 Answers

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
}
user_11334050

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.

user_7340400

vuex source code

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

user_102494120
Related