はじめに: データの一元管理、1 つの変更、複数の使用、複数のコンポーネントが同じ状態に依存、異なるコンポーネントの動作は同じ状態を変更する必要がある、エコロジー環境は公式プラグイン vuex を提供します
1.npm i vuex -S
2 import Vuex from "vuex" print console.log(Vuex) で Vuex 内の情報を取得します。Vuex はオブジェクトです
ストアクラス、マップシリーズ機能、コミュニケーションツールあり
1. ストア クラスは状態管理インスタンスを作成し、vue のルートにハングして、vue アプリケーション全体のデータを制御します。
2. マップ シリーズ関数、コミュニケーション ツール:mapActions、mapMutations、mapGetters、mapState
3. 設定 (プラグイン) ルーティング設定と同様に、vuex.js を含むプラグイン ファイルを作成します。
Vue プラグイン、vue を導入、プラグインをインストール、vuex インスタンスを作成、vuex に Store というクラスがあり、新規でインスタンスを作成、状態管理インスタンスを公開、main.js に導入、vue にマウント
4. 役割分割: コンポーネント、アクション、ミューテーション、状態、ゲッター
5. コンポーネントコンポーネントがリクエストを送信します。
ディスパッチ (インスタンスメソッド) ====> アクション
mapActions(関数、コミュニケーションツール) ====> アクション
mapMutations (関数、コミュニケーションツール) ====> ミューテーション
commit (インスタンスメソッド、通信ツール) ====> ミューテーション
6.アクションは同期および非同期のビジネスコミットインスタンスメソッド、通信ツールを実行します。
commit (インスタンスメソッド、通信ツール) ====> ミューテーション
7.突然変異は状態を変更します、突然変異状態.key=value
8.state 状態 {key:value}、データ
9. ゲッター (外部に配置された計算プロパティと同様) 処理ステータスの読み取り (データの再計算)、レンダリングするときにゲッターを検索します。
10. コンポーネントはデータを取得するためにコンポーネント内でレンダリングする準備ができています。レンダリングする場合、コンポーネントはゲッターを見つけ、ゲッターは状態を見つけてコンポーネントに取得します。
mapGetters(関数、コミュニケーションツール) =====》 getters
mapState(関数、通信ツール) =====》stateはデータを直接受け取ります
たとえば、state =====>state はデータを受け取ります { {$store.state.count}} はデータを直接受け取ります
注:
インスタンス メソッド (ディスパッチ、コミット): インスタンスに属しているため、インスタンス メソッドを呼び出すには、まずインスタンス this.$store.commit を使用する必要があります。関数、通信ツール (mapMutations、mapActions、mapGetters、mapState): 関数、vuex オブジェクトの呼び出し
「vuex」から {mapGetters,mapState,mapActions,mapMutations} をインポートします
メソッド:mapActions(['jia','jian','odd','redDate'])
1. import Vuex from 'vuex'、Vuex はオブジェクトであり、関連するメンバーは次のとおりです
| メンバー | 使用 |
| 店 | クラス、状態管理のインスタンスを構築します |
| マップアクション | 機能、コミュニケーションツール |
| マップの突然変異 | 機能、コミュニケーションツール |
| マップゲッター | 機能、コミュニケーションツール |
| 地図の状態 | 機能、コミュニケーションツール |
2. 状態管理インスタンス this.$storeの関連メンバー
let store = new Vuex.Store({ //打造状态管理实例
// 角色目录
// state:{},// actions:{},// mutations:{},// getters:{}
state,actions,mutations,getters
})
export default store //将实例暴露出去| メンバー | 使用 |
| 急送 | インスタンスメソッド、コミュニケーションツール |
| 専念 | インスタンスメソッド、コミュニケーションツール |
| 州 | 属性、すべてのデータが配置される公開データを取得します |
常山にいない Zilong さんのブログを共有しましょう。元のアドレス: Vue ---- State Management_hryztt123 のブログ - CSDN ブログ