What is the Vuex "context" object?

Kobi picture Kobi · Nov 15, 2017 · Viewed 12k times · Source

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!

Answer

rayfranco picture rayfranco · Nov 15, 2017

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
}