vuexシロ入門

1.Vuexとは何ですか.
vuexはvue専用です.jsが設計した集中的な状態管理アーキテクチャ.ステータス?dataのプロパティが他のvueコンポーネントに共有される必要がある部分をステータスと理解します.簡単に言えばdataで共通の属性が必要です.
2.Vuexを使用して状態を統一的に管理するメリット

はvuexで共有データを集中的に管理することができ、

の開発と後期メンテナンスが容易である.

は、コンポーネントの直接的なデータ共有を効率的に実現することができ、開発効率を向上させる

である.

vuexに格納データはすべて応答式であり、データとページの同期

を実現することができる.
3.Vuex状態管理と従来のグローバル変数の使用の違い

Vuexのステータスストレージは応答式です.つまり、コンポーネントがこのVuexのステータスを使用すると、それが変更されると、関連するすべてのコンポーネントが自動的に対応するデータを更新し、開発者が手間を省くことができます.

Vuexの状態を直接変更することはできません:グローバルオブジェクト変数の場合、変更は簡単ですが、Vuexではできません.修正するには、Vuexが提供する唯一の方法を使用しなければなりません.表示されたコミット(commint)mutationsを使用して修正を実現します(ここでは知られていませんが、次のセクションではフロントエンドについて説明します).このようなメリットは、各状態の変化を追跡しやすく、開発中にデバッグする際に非常に実用的です.

4.どのようなデータをVuexに格納するか
一般的には、コンポーネント間で共有されているデータだけがvuexに格納される必要があり、コンポーネントのプライベートデータは、自身のdataに格納されたままでよい.
5.vuexの使用
1.インストール

npm install vuex -S   //S        

2.導入

import Vuex from 'vuex'
Vue.use(Vuex)

3.storeの作成

const store = new Vuex.Store({
     
	state:{
     count:0}   //state             
}) 

4.storeオブジェクトをvueインスタンスにマウントする

new Vue({
     
	el:"#app",
	render:h => h(app),  //  app   
	router,              //    
	store				
})

5.vuexは主に以下のモジュールを含む

State:デフォルトの初期状態を設定できるアプリケーション状態のデータ構造を定義します.

Getter:コンポーネントがStoreからデータを取得できるようにします.mapGetters補助関数はstoreのgetterをローカル計算プロパティにマッピングするだけです.

Mutation:storeの状態を変更する唯一の方法であり、同期関数である必要があります.

Action:ステータスを直接変更するのではなく、mutationをコミットするために使用され、任意の非同期操作を含めることができます.

Module:storeをモジュール(module)に分割できます.各モジュールには、state、mutation、action、getter、さらにはネストされたサブモジュールがあります.上から下まで同様の分割

があります.