How to use Provide and Inject to make Vue3 plug-in

Why Vue3 plugins work differently than before

In Vue2, most plugins inject properties onto this. For example, the Vue router can be accessed through this.$router.

However, the setup() method no longer contains the same reference to this. The main reason for this change is to add support for Typescript.

So how do we access our plug-ins in Vue3? We can use provide and inject to help us inject dependencies into the Vue program. Provide/inject is used for dependency injection, which allows us to provide plugins in the root directory of the Vue program and then inject them into child components.

In the Composition API, these two methods can only be called during the setup() method.

What are provide and inject

We need some kind of key to identify dependencies, and Javascript's Symbol can compound this requirement.

The provide method will then associate our Symbol with a value, and the inject method will retrieve this value with the same Symbol.

The following is an example:

import { provide, inject } from 'vue'  const LoggedInSymbol = Symbol()  const ParentComponent = {   setup() {     provide(LoggedInSymbol, true)   } }  const DeepDescendent = {   setup() {     // 第二个可选参数是默认值（如果不存在）     const isLoggedIn = inject(LoggedInSymbol, false)     return {       isLoggedIn     }   } }

Vue3 Some very practical techniques can be achieved through this mode.

Dependencies can be provided globally in the program

If we want to provide something in the global scope, we can use app.provide when declaring our VUE instance. Injection can then be done in the same way.

main.jsimport { createApp } from 'vue' import App from './App.vue'   const app = createApp(App)  const ThemeSymbol = Symbol() app.provide(ThemeSymbol, 'dark')   app.mount('#app')

You can use ref to provide responsive data

This is also very convenient if we want to pass responsive data to child components. Just use ref() to pass a reactive property of our method.

// 生产者r (父组件) const LoggedInSymbol = Symbol() const loggedIn = ref('true') provide(LoggedInSymbol, loggedIn)  // 消费者 (子组件) const theme = inject(LoggedInSymbol, ref('false'))

How to use provide and inject in plug-ins

Actually designing the plug-in is very similar to the simple example we just saw.

But we don’t want to use a single value, but a combined function. This is a huge advantage of Vue3 - the ability to organize and extract code based on functions.

Since our code should be written with organized composition functions anyway, we only need to create these provide and inject methods to write a plug-in.

Let’s take a brief look at the plug-in examples provided in the Vue3 Composition API documentation.

Plugin.jsconst StoreSymbol = Symbol()  export function provideStore(store) {   provide(StoreSymbol, store) }  export function useStore() {   const store = inject(StoreSymbol)   if (!store) {     // throw error, no store provided   }   return store }

It will be used like this in actual components:

// 在组件根目录提供 store // const App = {   setup() {     provideStore(store)   } }  const Child = {   setup() {     const store = useStore()     // use the store   } }

According to the above code, in some root components, we provide plug-ins and pass component functions to them. Then we have to inject it into our component wherever we want to use it.

The component never has to actually make the provide/inject call, but only calls the provideStore/useStore method exposed by the plugin.

Can I still use the old plug-in?

The short answer is: yes. If you want to say more, it depends on your own thoughts.

You can continue to use the Options API and reference this in the same way as before, and all old plugins work unchanged.

But migrating to Vue3 and taking advantage of all its features feels like it’s worth it.

As long as you want to use Vue2’s Options API, your plug-in will work normally. However, many well-maintained plugins or libraries should add support for Vue3.

The above is the detailed content of How to use Provide and Inject to make Vue3 plug-in. For more information, please follow other related articles on the PHP Chinese website!