Vuexの初歩的な概念
1426 ワード
(以下の文章は個人的な観点を含む)
vuexとは
vuexは他の言語のグローバル変数(PHPの$_GLOBALSと似ている)に相当し、vuexはmutationsによってグローバル変数をカプセル化し、変数の制御をよりコンパクトにする.
vuexには3つの概念が含まれている:1.state:グローバル変数をstateに宣言します.mutations:グローバル変数を変更する方法をmutationsに宣言します.commit:私たちはcommitを通じてmutationsの中の方法を呼び出してstateの状態を変えます.
storeの使用では、この3つの概念の使用について説明します.
上記の3つの概念から、ビュー内のインタフェースを介してcommitを呼び出してmutationsを呼び出し、mutationsがstateの状態を変更し、stateがビューに戻るプロセスを決定することができます.
view->commit->mutations->state->view.
なぜvuexを使うのか
モジュールとモジュールの通信をより簡単にするために、公式ドキュメントでは、小さなプロジェクトでグローバル変数を使用する必要がない場合は、busを直接使用すればよいというヒントがあります.個人的には、コンポーネントの数が2つを超えると、vuexを使用するのは良い選択であり、小さなモジュールでは必要ありません.
使用方法
宣言store
vuexの使用にはvuexをインポートする必要がある.js,ダウンロードアドレス
まず、Vuexを通じて「グローバル変数を明らかにする」必要があります.Storeメソッドは、store、すなわち倉庫と呼ばれるvuexオブジェクトを登録します.次の例は、公式ドキュメント:
storeの使用
コンポーネントにstore(つまり、上で宣言したグローバル配列)を適用する必要があるのは簡単です.コンポーネントの計算プロパティ(computed)でstoreの変数の値を返すことができます.もちろんmethodsも返すことができますが、効率は高くありません.
戻り方法:
まずこちらの公式ドキュメント転送ゲートに更新します
vuexとは
vuexは他の言語のグローバル変数(PHPの$_GLOBALSと似ている)に相当し、vuexはmutationsによってグローバル変数をカプセル化し、変数の制御をよりコンパクトにする.
vuexには3つの概念が含まれている:1.state:グローバル変数をstateに宣言します.mutations:グローバル変数を変更する方法をmutationsに宣言します.commit:私たちはcommitを通じてmutationsの中の方法を呼び出してstateの状態を変えます.
storeの使用では、この3つの概念の使用について説明します.
上記の3つの概念から、ビュー内のインタフェースを介してcommitを呼び出してmutationsを呼び出し、mutationsがstateの状態を変更し、stateがビューに戻るプロセスを決定することができます.
view->commit->mutations->state->view.
なぜvuexを使うのか
モジュールとモジュールの通信をより簡単にするために、公式ドキュメントでは、小さなプロジェクトでグローバル変数を使用する必要がない場合は、busを直接使用すればよいというヒントがあります.個人的には、コンポーネントの数が2つを超えると、vuexを使用するのは良い選択であり、小さなモジュールでは必要ありません.
使用方法
宣言store
vuexの使用にはvuexをインポートする必要がある.js,ダウンロードアドレス
まず、Vuexを通じて「グローバル変数を明らかにする」必要があります.Storeメソッドは、store、すなわち倉庫と呼ばれるvuexオブジェクトを登録します.次の例は、公式ドキュメント:
const store = new Vuex.Store({ state:{ count:0 }, mutations:{ increment(state){ state.count++; } } })
上記の例では、グローバル変数の配列storeが登録されています.配列には変数countが含まれています.この変数の値を変更するには、mutationsでメソッドを定義して彼を変更する必要があります.storeの使用
コンポーネントにstore(つまり、上で宣言したグローバル配列)を適用する必要があるのは簡単です.コンポーネントの計算プロパティ(computed)でstoreの変数の値を返すことができます.もちろんmethodsも返すことができますが、効率は高くありません.
戻り方法:
Vue.component('counter',{ template:'
{{count}}
', computed:{ count:()=>store.state.count } })
上にコンポーネントを登録し、countというcomputedを宣言し、storeのstateのcountを返しました.まずこちらの公式ドキュメント転送ゲートに更新します