Vue3 app.provide() function

Vue3 全局 APIVue3 Global API

app.provide()It is a very important function that allows us to provide data or methods at the top level of the application, making these data or methods accessible and usable in any component of the entire application.

By usingapp.provide()andinjectthe combination, we can easily share data between multiple components, avoiding the cumbersome passing of props and events.

1. What isapp.provide()？

app.provide()It is a dependency injection mechanism provided in Vue3. Through it, we can define some global data or methods at the top level of the application, and then in any child component, throughinjectto obtain these data or methods. This approach is very suitable for sharing data or functionality among multiple components, without needing to pass them layer by layer through props or events.

1.1 Why do we need itapp.provide()？

In large Vue applications, we often need to share data or methods between multiple components. If we pass these data through props or events, the code becomes complex and difficult to maintain. However,app.provide()it provides a more concise and efficient way to solve this problem.

2. app.provide()The basic syntax of

app.provide()Its basic syntax is very simple; it accepts two parameters:

Example

app.provide(key, value)
  • key: a string or Symbol, used to identify the data or method provided.
  • value: the data or method to be provided, which can be a value of any type, including objects, functions, etc.

3. How to useapp.provide()？

3.1 Provide data or methods at the top level of the application

First, we need to use it at the top level of the applicationapp.provide()to provide data or methods. Usually inmain.jsthe file, the configuration is performed:

Example

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

// Provide global data
app.provide('message', 'Hello, Vue3!')

// Provide global method
app.provide('logMessage', (msg) => {
  console.log(msg)
})

app.mount('#app')

In the above code, we useapp.provide()to provide a string'Hello, Vue3!'and a methodlogMessage。

3.2 Use in child componentsinjectGet data or methods

In child components, we can useinjectto get the data or methods provided at the top level of the application. For example:

Example

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="log">Click me</button>
  </div>
</template>

<script>
export default {
  inject: ['message', 'logMessage'],
  methods: {
    log() {
      this.logMessage('The button was clicked!')
    }
  }
}
</script>

In this component, we, throughinjectobtainedmessageandlogMessage, and use them in the template and methods.

4. Practical application example

Suppose we are developing a user management system and need to share current user information across multiple components. We can useapp.provide()to provide user information and retrieve and use it in the components that need it.

4.1 Provide user information at the top level of the application

Example

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

// Provide current user information
app.provide('currentUser', {
  name: 'Zhang San',
  age: 25,
  email: 'zhangsan@example.com'
})

app.mount('#app')

4.2 Use user information in child components

Example

<template>
  <div>
    <h1>User information</h1>
    <p>Name: {{ user.name }}</p>
    <p>Age: {{ user.age }}</p>
    <p>Email: {{ user.email }}</p>
  </div>
</template>

<script>
export default {
  inject: ['currentUser'],
  computed: {
    user() {
      return this.currentUser
    }
  }
}
</script>

In this way, we can easily share and use user information across multiple components without having to pass it via props every time.

Other extensions