Vue3 app.provide() 関数

Vue3 全局 APIVue3 グローバル API

app.provide()は非常に重要な関数であり、アプリケーションのトップレベルでデータやメソッドを提供することができ、これらのデータやメソッドをアプリケーション全体の任意のコンポーネントからアクセスして使用できるようにします。

を通じてapp.provide()とinjectの組み合わせにより、複数のコンポーネント間でデータを簡単に共有でき、props やイベントの煩雑な受け渡しを避けることができます。

1. とはapp.provide()？

app.provide()は Vue3 で提供されている依存性注入メカニズムの一種です。これにより、アプリケーションのトップレベルでグローバルなデータやメソッドを定義し、その後任意の子コンポーネントではinjectこれらのデータやメソッドを取得します。

1.1 なぜ必要なのかapp.provide()？

大規模な Vue アプリケーションでは、複数のコンポーネント間でデータやメソッドを共有する必要がよくあります。props やイベントを介してこれらのデータを渡すと、コードが複雑になり、保守が難しくなります。一方、app.provide()は、この問題を解決するためにより簡潔で効率的な方法を提供します。

2. app.provide()の基本構文

app.provide()の基本構文は非常にシンプルで、2つのパラメータを受け取ります：

例

app.provide(key, value)
  • key：提供されたデータやメソッドを識別するための文字列または Symbol。
  • value：提供するデータまたはメソッド。オブジェクトや関数など、あらゆる型の値を指定できます。

3. 使い方app.provide()？

3.1 アプリケーションのトップレベルでデータまたはメソッドを提供する

まず、アプリケーションのトップレベルでapp.provide()データやメソッドを提供するために、通常はmain.jsファイル内で設定します：

例

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

const app = createApp(App)

// グローバルデータを提供
app.provide('message', 'Hello, Vue3!')

// グローバルメソッドを提供
app.provide('logMessage', (msg) => {
  console.log(msg)
})

app.mount('#app')

上記のコードでは、app.provide()1つの文字列を提供し'Hello, Vue3!'、1つのメソッドを提供しました。logMessage。

3.2 子コンポーネントで使用するinjectデータまたはメソッドを取得する

子コンポーネントでは、injectアプリケーションのトップレベルで提供されたデータやメソッドを取得します。例：

例

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="log">クリック</button>
  </div>
</template>

<script>
export default {
  inject: ['message', 'logMessage'],
  methods: {
    log() {
      this.logMessage('ボタンがクリックされました！')
    }
  }
}
</script>

このコンポーネントでは、inject取得しましたmessageとlogMessage、それらをテンプレートとメソッド内で使用しています。

4. 実際の応用例

ユーザー管理システムを開発していると仮定します。複数のコンポーネント間で現在のユーザー情報を共有する必要があります。私たちはapp.provide()ユーザー情報を提供し、必要なコンポーネントで取得して使用します。

4.1 アプリケーションのトップレベルでユーザー情報を提供する

例

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

const app = createApp(App)

// 現在のユーザー情報を提供
app.provide('currentUser', {
  name: '张三',
  age: 25,
  email: '[email protected]'
})

app.mount('#app')

4.2 子コンポーネントでユーザー情報を使用する

例

<template>
  <div>
    <h1>ユーザー情報</h1>
    <p>名前: {{ user.name }}</p>
    <p>年齢: {{ user.age }}</p>
    <p>メールアドレス: {{ user.email }}</p>
  </div>
</template>

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

この方法を使えば、複数のコンポーネント間でユーザー情報を簡単に共有・使用でき、毎回 props を介して渡す必要はありません。

その他の拡張