Vue3のprovide/inject機能の詳細解説：高度なコンポーネント通信方式の応用-Vue.js-php.cn

Vue3のprovide/inject機能の詳細解説：高度なコンポーネント通信方式の応用

PHPz

リリース： 2023-06-18 08:13:15

オリジナル

6484 人が閲覧しました

Vue3 は、より効率的で高速な更新と、より高度なコンポーネント通信方法を備えた Vue フレームワークの最新バージョンです。その中でもprovide/inject関数はコンポーネント内のnon-propsデータを転送できる高度なコンポーネント通信方式で、状態管理やテーマスタイルなどコンポーネント間で共有する必要があるデータ転送に非常に適しています。

この記事では、Vue3 の Provide/Inject 関数について、その使用法、実装原理、開発者の参考となる実用的なアプリケーションシナリオなどを含めて詳しく説明します。

provide/inject 関数の基本概念と使用法

1. 基本概念

provide/inject 関数は、Vue3 の新しいコンポーネント通信メソッドであり、サブコンポーネントを可能にします。親コンポーネントから提供されたデータを注入することで、レベル間のデータ共有を実現します。その具体的なアプリケーションは次のとおりです。

状態管理: Vuex と同様に、provide/inject 関数を使用してグローバル状態情報を渡すことができます。
構成可能なテーマスタイル: Provide/inject 関数は、構成されたテーマスタイルを渡して、さまざまなテーマスタイルの変換を実現することもできます。

2. 使用方法

provide/inject 関数の使用方法は非常に簡単で、親コンポーネントにデータを提供し、inject 関数を注入するだけです。サンプルコードは次のとおりです。

// Parent Component
const app = {
  data() {
    return {
      globalState: 'Hello World'
    }
  },
  provide() {
    return {
      globalState: this.globalState
    }
  }
}

// Child Component
const ChildComponent = {
  inject: ['globalState'],
  mounted() {
    console.log(this.globalState); // Output 'Hello World'
  }
}

ログイン後にコピー

上記のサンプルコードでは、最初に親コンポーネント app を定義し、次にグローバル状態オブジェクトであるサブコンポーネント を提供します。 ChildComponent は、inject 属性を通じて状態オブジェクトを挿入し、状態データを取得して使用できるようにします。 provide/inject 関数の実装原理

Vue3 での Provide 関数と inject 関数の実装は、主に 3 つの API 関数、つまり

inject

、provide によって完了します。 と watchEffect。このうち、

inject

関数は、親コンポーネントによって提供されるデータを注入するために使用されます。 provide 関数は、親コンポーネントの「提供されたオブジェクト」にデータを提供し、そのオブジェクトを子コンポーネントに注入するための watchEffect 観察オブジェクトとして追跡するために使用されます。 watchEffect 関数は、provide メソッドのデータ変更を監視し、データが変更されたときにサブコンポーネント内の関連データへの参照を更新するために使用されます。 provide/inject関数の適用シナリオ

以下、実際の開発におけるprovide/inject関数の適用シナリオを紹介します。

1. 状態管理

Vue3 では、Vuex 状態管理ライブラリと同様に、provide/inject 関数を利用して簡単に状態管理を行うことができます。

// Store
const store = {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  },
  provide() {
    return {
      increment: this.increment,
      count: this.count
    }
  }
}

// Component
const Component1 = {
  inject: ['count', 'increment'],
  mounted() {
    console.log(this.count); // Output 0
    this.increment()
    console.log(this.count); // Output 1
  }
}

ログイン後にコピー

上記のコード例では、状態オブジェクト

store

を定義し、その中に 2 つのメソッド count と increment を提供します。 provide 属性を通じて子コンポーネントにそれらを追加します。子コンポーネントでは、

inject

を使用して count プロパティと increment プロパティを注入することでデータ共有を実現します。何らかの状態変化が発生した場合、increment メソッドを呼び出して状態変化を実現することで、カウンターの値を変更できます。 2. テーマスタイルの設定

provide/inject 関数を使用して、フォントの色、背景色、フォントサイズなどのテーマスタイルを設定することもできます。サンプルコードは次のとおりです。

// Theme
const darkTheme = {
  textColor: 'white',
  backgroundColor: 'black',
  fontSize: '16px'
}

const lightTheme = {
  textColor: 'black',
  backgroundColor: 'white',
  fontSize: '14px'
}

// Parent Component
const ThemeProvider = {
  data() {
    return {
      theme: darkTheme
    }
  },
  provide() {
    return {
      theme: this.theme,
      toggleTheme: () => {
        this.theme = (this.theme === darkTheme) ? lightTheme : darkTheme
      }
    }
  }
}

// Child Component
const ChildComponent = {
  inject: ['theme', 'toggleTheme'],
  mounted() {
    console.log(this.theme.backgroundColor); // Output 'black'
    console.log(this.theme.textColor); // Output 'white'
    console.log(this.theme.fontSize)
    this.toggleTheme();
    console.log(this.theme.backgroundColor); // Output 'white'
    console.log(this.theme.textColor); // Output 'black'
    console.log(this.theme.fontSize)
  }
}

ログイン後にコピー

まずテーマスタイル

darkTheme

と lightTheme を定義し、次に親コンポーネント ThemeProvider に を指定します。 テーマ と toggleTheme データ。データ型はテーマオブジェクトとテーマ切り替えメソッドです。子コンポーネントでは、inject を介してテーマオブジェクトを挿入し、現在のテーマスタイルを取得できるようにします。特定のイベントが

ChildComponent

でトリガーされると、toggleTheme メソッドを呼び出してテーマを切り替え、テーマを変更する効果を実現します。概要