Vue Composition Api This

Posted on  by admin

Modified1 month ago. I am using Vue 3 with Composition API, and I want to use a third-party package (for example @meforma/vue-toaster), and it should be used like this (in Options API):.

and then in the component:. But this is not working inside the Composition API's setup() function.

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

Accessing Mutations and Actions #

200200 bronze badges. @meforma/vue-toaster installs $toast on the application context, which can be accessed from getCurrentInstance().appContext.globalProperties in setup():.

1414 gold badges141141 silver badges200200 bronze badges. 200200 bronze badges. i've the same issue.So i've found and easy way to do:I'm using Vite BTW.my main.js. Hope it could be helpful. The setup function runs one-time before the component is created.

Examples #

It lacks the this context and may not be where you would want to place these anyway.

You could try putting it into a method that you can call via a button. 1515 gold badges8686 silver badges133133 bronze badges.

Accessing State and Getters #

133133 bronze badges. To access the store within the setup hook, you can call the useStore function.

This is the equivalent of retrieving this.$store within a component using the Option API. In order to access state and getters, you will want to create computed references to retain reactivity.

JSX/TSX

This is the equivalent of creating computed properties using the Option API. When accessing mutations and actions, you can simply provide the commit and dispatch method inside the setup hook.

Check out the Composition API example to see example applications utilizing Vuex and Vue's Composition API.

SSR

Even if there is no definitive Vue 3 API for SSR yet, this plugin implements the onServerPrefetch lifecycle hook that allows you to use the serverPrefetch hook found in the classic API.

Browser Compatibility

@vue/composition-api supports all modern browsers and IE11+. For lower versions IE you should install WeakMap polyfill (for example from core-js package).

Limitations

Support Not Supported

Ref Unwrap

Should NOT use ref in a plain object when working with Array
Should always use ref in a reactive when working with Array

Template Refs

String ref && return it from setup()
String ref && return it from setup() && Render Function / JSX
Function ref
Render Function / JSX in setup()
⚠️$refs accessing workaround

⚠️Warning: The SetupContext.refs won't exist in Vue 3.0. @vue/composition-api provide it as a workaround here.

If you really want to use template refs in this case, you can access vm.$refs via SetupContext.refs

Reactive

⚠️reactive()mutates the original object

reactive uses Vue.observable underneath which will mutate the original object.

💡 In Vue 3, it will return an new proxy object.

⚠️set and del workaround for adding and deleting reactive properties

⚠️ Warning: set and del do NOT exist in Vue 3. We provide them as a workaround here, due to the limitation of Vue 2.x reactivity system.

In Vue 2, you will need to call set to track new keys on an object(similar to Vue.set but for reactive objects created by the Composition API). In Vue 3, you can just assign them like normal objects.

Similarly, in Vue 2 you will need to call del to ensure a key deletion triggers view updates in reactive objects (similar to Vue.delete but for reactive objects created by the Composition API). In Vue 3 you can just delete them by calling delete foo.bar.

Watch

onTrack and onTrigger are not available in WatchOptions

createApp

⚠️createApp() is global

In Vue 3, createApp() is introduced to provide context(plugin, components, etc.) isolation between app instances. Due the the design of Vue 2, in this plugin, we provide createApp() as a forward compatible API which is just an alias of the global.

createElement / h

⚠️createElement / h workaround

createElement / h in Vue 2 is only accessable in render() function. To use it outside of render(), you can explicitly bind a component instance to it.

⚠️Warning: This ability is provided as a workaround Vue 2, it's not part of the Vue 3 API.

shallowReadonly

⚠️shallowReadonly() will create a new object and with the same root properties, new properties added will not be readonly or reactive.

💡 In Vue 3, it will return an new proxy object.

readonly

⚠️readonly() provides only type-level readonly check.

readonly() is provided as API alignment with Vue 3 on type-level only. Use isReadonly() on it or it's properties can not be guaranteed.

props

⚠️toRefs(props.foo) will incorrectly warn when accessing nested levels of props.
⚠️isReactive(props.foo) will return false.

computed().effect

⚠️computed() has a property effect set to true instead of a ReactiveEffect.

Due to the difference in implementation, there is no such concept as a ReactiveEffect in @vue/composition-api. Therefore, effect is merely true to enable differentiating computed from refs:

Missing APIs

The following APIs introduced in Vue 3 are not available in this plugin.

  • onRenderTracked
  • onRenderTriggered
  • isProxy

Reactive APIs in data()

Passing ref, reactive or other reactive apis to data() would not work.

emits Options

emits option is provided in type-level only, in order to align with Vue 3's type interface. Does NOT have actual effects on the code.

Performance Impact

Due the the limitation of Vue2's public API. @vue/composition-api inevitably introduces some performance overhead. Note that in most scenarios, this shouldn't be the source of performance issues.

You can check the benchmark results for more details.