Vue3 Context

Posted on  by admin

Modified2 years, 1 month ago. 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.

You Might Be Interested In:

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:.

Composition API Equivalent

What is the context object / what is its purpose? What are all the properties/methods that it is making available to use in Vuex? 33 gold badges1515 silver badges1818 bronze badges. 1818 bronze badges.

Preview:

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:. 33 gold badges2525 silver badges3838 bronze badges.

  • 3838 bronze badges. 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.

88 gold badges7070 silver badges9191 bronze badges.

Download Details:

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

Pale Blue DotPale Blue Dot.

Modified5 months ago. I'm running into an issue with Vue 3 (alpha 4):. Inside the setup() function I am trying to read the parent component.

As per the documentation on https://vue-composition-api-rfc.netlify.com/api.html#setup it should expose the parent via the context argument, either as a property of context.attrs or directly as parent (see the SetupContext bit under 'typing').

ChildComponent using context.attrs

I don't find the documentation to be very clear on whether parent should be accessed directly from SetupContext, or via SetupContext.attrs, so I've tried both ways, but to no avail.

ParentComponent.vue - passing attributes

Here's my issue, I can access the SetupContext and SetupContext.attrs (which is a Proxy) just fine when logging them.

SetupContext.attrs exposes the usual proxy properties ([[Handler]], [[Target]] and [[IsRevoked]]) and when inspecting [[Target]] it clearly shows the parent property.

When logging the parent though, it just prints out undefined:. Spreading the context yields the same result:. I'm a bit new to proxies in JavaScript, but from what I've read on them, and from experimenting with proxies returned by reactive() for example.

Not the answer you're looking for? Browse other questions tagged vue.jsvuejs3vue-composition-api or ask your own question.

I should just be able to access the property like I normally would with an object. Any ideas on what I'm doing wrong?

I've created a codesandbox to reproduce the problem. 3737 bronze badges. You can use getCurrentInstance. Vue documentation. Its as easy as:. Also, probably worth noting that Vue composition api plugin exposes parent in the same way, but it is referenced as instance.$parent there.

I know this doesn't answer the question directly, but using provide/inject (https://v3.vuejs.org/guide/component-provide-inject.html) has helped me resolve this same issue where I wanted to get a data attribute from the parent node and to pass it to the rendered component, but could not access the parent anymore after upgrading from Vue2 to Vue3.

Rather than trying to expose the parent, I passed a prop from its dataset down to the rendered component. Upon creating the app, I did the following. Then, inside the component, I could access the 'dataset' by doing the following.

CustomComponent.vue

This is very stripped down, but shows my case nicely i guess. In any case, if you're trying to do something similar and want to get data via parent data attribute, you could look into provide/inject.

Hope it helps anyone out there! A lightweight, dynamic, themeable, multi-level, custom context menu component for Vue 3 applications.

ChildComponent.vue - render function

Import the context menu component and a theme CSS of your choice.

Add a basic context menu to your app. Available props for the VContextmenu component.

Available props for the VContextmenuItem component. Available props for the VContextmenuSubmenu component. Available props for the VContextmenuGroup component. Author: heynext.

ChildComponent.vue - rendering slots!

Live Demo: https://codepen.io/iqq800/pen/eYvYVOJ.

ParentComponent.vue

Download Link: https://github.com/heynext/v-contextmenu/archive/refs/heads/main.zip.

Official Website: https://github.com/heynext/v-contextmenu.

You block advertising 😢Would you like to buy me a ☕️ instead? The React Context API provides a way to share properties that are required by many components (e.g., user settings, UI theme) without having to pass a prop through every level of the tree (aka prop drilling).

Description:

Although Vue.js does not provide the same abstraction out of the box, in this article, we’ll see that in Vue 3, we have all the tools we need to replicate the same functionality quickly.

In this example, we look at how we can use this pattern to make certain information globally available everywhere in our entire application.

The ProvideUserSettings component you see beneath, provides a reactive state with some default values and an update() function for setting properties on the state object.

ModalComponent.vue

Register for the Newsletter of my upcoming book: Advanced Vue.js Application Architecture. Next we take a look at how we can use the ProvideUserSettings component in our application.

ParentComponent.vue - listen for close event

We probably need the settings in a lot of different components throughout our application.

Do you want to learn more about advanced Vue.js techniques?

Because of that, it makes sense to put the provider at the root level inside of our App component. So we now have access to the user settings from anywhere in our component tree.

Above, we see how to consume the state of the injected context. In the following example, we explore how to update the state from any component in our application.

  • data

  • computed

  • methods

This time we inject the update() function with the UserSettingsUpdateSymbol. We wrap the injected function in a new updateTheme() function which directly sets the theme property of our user settings object.

Wrapping it up

In theory, we could not wrap our state with readonly() and mutate it directly.

But this can create a maintenance nightmare because it becomes tough to determine where we make changes to the (global) state. When we click one of the two buttons, the user settings state is updated, and because it is a reactive object, all components which are using the injected user settings state are updated too.

Follow me to get my latest Vue.js articles.

Although Vue.js does not have the concept of Context built-in like React, as we’ve seen in this article, it is straightforward to implement something similar to that with Vue 3 provide/inject ourselves.