VUE-ルーティング(7)vuex状態

まず、vuexインストール

インストールファイルは、より多くのstore.jsを発見した後、

倉庫に相当store.js、全てのデータが状態で書き込みます

第二に、再実行した後にインストール

第三に、機能の学生のショーのページを追加

1)二つの成分を導入Student.vue

2)成分中のこれらの二つのコンポーネントの追加

二つの成分内側3)書き込んだ内容

4)アセンブリstudent.vueを使用

結果の表示:

第四に、データストアの取得

$ストアを通して利用可能

データプール:

studentList中:

ボタンは、名前を変更するにはクリックイベントを追加するとき、私たちは生徒の名前を追加することは変わっていないことがわかりました

名前のデータが固定されていることである、$のstore.state.nameは、名前のデータを変更する理由は変更されず、計算時間は、プロパティを計算することができ、データを更新

データは変更することができます

第五に、もしデータストアの増加

データは、プール内のデータが大きい場合、このメソッドは不便であるデータを変更するには、このメソッドを使用しますが、

したがって、方法が提供されるvuexは、ストア内のデータの多くを得ることができます - > mapState(直接オブジェクトはの関数であるオブジェクトを返します)

オブジェクトは、オブジェクトが非常に計算されたと同じように、関数であります

mapState直接に計算配置することができます

彼らは、自分自身をレンダリングする競合を避けるためになります上記のデータのname属性を持っている場合しかし、mapStata名前は、名前を変更することがあり

名前を変更するには、上記のレンダリング:

第六に、達成するための機能のリストを追加

1)まず、データが入力で入力されたかを知るため、双方向のデータバインディングします

2)データの名前と年齢を設定します

あなたが入力ボックスの値が何であるかを知っておく必要がある場合3)ボタンをクリックしてください

4)データストアに変更

値のオブジェクトに名前と年齢の5)3)の値の配列に、オブジェクト

6)ここで、ループのレンダリングのリスト、ループのために必要なキー値、タイムスタンプ値際にキー

7)値リストの変化を

8)変更studentListコンポーネント

 

おすすめ

転載: www.cnblogs.com/tianya-guoke/p/11520850.html