今回はsetup()関数での副作用の使い方についてお話しましょう。
まず最初に、setup() 関数が Vue3 の非常に魔法の場所であることを明確にする必要があります。これは、乱雑な魔法の小道具 (つまり、コード) を組み合わせて、魔法のような魔法の効果 (つまり、アプリケーション) を作成するのに役立つ魔法の箱のようなものです。
この魔法のボックスでは、データ、計算されたプロパティ、メソッドなどを宣言的に定義するなど、さまざまなことができます。ただし、副作用の管理など、魔法の箱では簡単に実行できないこともあります。
それで、副作用は何ですか？簡単に言うと、コードの実行中に生成される追加の影響や効果を指します。たとえば、操作を実行すると、結果を返すだけでなく、一部の状態を変更したり、一部のイベントをトリガーしたりすることもあります。
では、setup() 関数での副作用はどのように処理すればよいでしょうか? これは次の方法で実現できます。
ref() 関数を使用してリアクティブ参照を作成する
まず、ref() 関数を使用してリアクティブ参照を作成します。この参照は、バインドされている値の変更をリッスンし、値が変更されたときにいくつかの副作用をトリガーすることができます。例えば：
<template>
<div>{
{ message }}</div>
</template>
<script>
import {
ref } from 'vue';
export default {
setup() {
const message = ref('Hello, Vue3!');
// 在值变化时触发副作用
message.value = 'Hello, World!';
message.value = 'Hello, Vue3!';
return {
message };
},
};
</script>
この例では、message という名前のリアクティブ参照を作成し、setup() 関数でその値を変更します。変更されるたびに、DOM の更新、イベントのトリガーなどの副作用がトリガーされます。
onMounted() などのライフサイクル関数の
使用 リアクティブ参照の使用に加えて、Vue3 の新しいライフサイクル関数を使用して副作用を処理することもできます。これらの関数には、onMounted()、onUpdated()、onUnmounted() などが含まれます。これらは、コンポーネントがマウント、更新、アンインストールされるときにそれぞれ呼び出され、対応する副作用操作を実行するために使用できます。
たとえば、onMounted() 関数で一部のデータを初期化したり、一部のリソースをロードしたりできます。
<template>
<div>{
{ data }}</div>
</template>
<script>
import {
onMounted } from 'vue';
import axios from 'axios';
export default {
setup() {
onMounted(() => {
axios.get('/api/data').then((response) => {
// 在组件挂载后加载数据并更新组件状态
this.data = response.data;
});
});
return {
data: null };
},
};
</script>
この例では、setup() 関数で onMounted() 関数を使用してデータをロードします。コンポーネントがマウントされると、axios ライブラリは GET リクエストを送信してデータを取得し、コンポーネントのステータスを更新します。ここでの this キーワードは、コンポーネントのデータ、計算されたプロパティ、その他のメソッドにアクセスできるコンポーネント インスタンスを指します。
依存関係の注入に Provide/Inject を使用する
上記の 2 つの方法に加えて、Vue3 の Provide/Inject メカニズムを使用して副作用処理を実装することもできます。Provide() メソッドを通じて依存関係を提供し、次に inject() メソッドを使用してこれらの依存関係を他のコンポーネントに注入します。これにより、依存関係を共有して引き渡すことができ、副作用を回避できます。
たとえば、グローバル ミックスインで Provide() メソッドを使用して、共有状態とメソッドを提供できます。
Vuex による状態管理
より複雑なアプリケーションの場合、状態管理が大きな問題になる可能性があります。この場合、Vue3 の組み込み状態管理ライブラリである Vuex を使用して状態を管理できます。
Vuex を使用すると、一元的な状態管理メカニズムが提供されるため、副作用の発生を効果的に回避できます。Vuex ストアですべての状態とメソッドを定義し、Vue.use() メソッドを通じてコンポーネントに Vuex を導入し、ストアを状態管理に使用できます。
たとえば、Vuex ストアに data という状態を定義し、データをロードするためのloadData というメソッドを提供できます。
<template>
<div>{
{ data }}</div>
</template>
<script>
import {
useStore } from 'vuex';
export default {
setup() {
const store = useStore();
store.commit('loadData');
return {
data: null };
},
};
</script>
この例では、setup() 関数で Vuex の useStore() メソッドを使用してストア インスタンスを取得し、commit() メソッドを呼び出して、loadData の副作用操作をトリガーします。コンポーネントのデータ状態を使用してデータを表示します。
要約すると、setup() 関数の副作用処理を使用すると、リアクティブ参照、ライフサイクル関数、プロバイド/インジェクト、および Vuex を使用して、さまざまな方法でコードと状態を管理できます。これらの方法にはそれぞれ独自の長所と短所があり、アプリケーションをより安定して保守しやすくするには、特定の状況に応じて副作用に対処する適切な方法を選択する必要があります。
もちろん、これは Vue3 の結合 API における副作用処理の一部にすぎず、習得する必要のあるスキルや考慮事項は他にもたくさんあります。これらの例がインスピレーションを与え、Vue3 をより効果的に使用して複雑なアプリケーションを構築するのに役立つことを願っています。