Vuex全体のケースの詳細な説明

npm インストール vuex --save

'vue' から Vue をインポートします
'vuex' から Vuex をインポートします
Vue.use(Vuex)

//ストアを作成する
Vuex のインスタンスを新規に作成します。

 //ストアを作成する
 定数ストア = 新しい Vuex.Store({
    //state はアプリケーション層の状態を格納します:{
        count:5 //合計: 5
    }
 });

定数ストア = 新しい Vuex.Store({
   //state はアプリケーション層の状態を格納します:{
      count:5 //合計: 5
   },
   ゲッター:{
      newCount:state => state.count * 3
   }
});

エクスポートデフォルト{
  計算: {
      新しいカウント(){
          this.$store.getters.newCount を返します。
      }
  }
};  

 定数ストア = 新しい Vuex.Store({
    //state はアプリケーション層の状態を格納します:{
        count:5 //合計: 5
    },
    // ミューテーションは状態ミューテーションでデータを変更する唯一の方法です:{
        増分(状態、値) {
            状態.count += 値;
        }
    }
 });

 メソッド: {
   getVal(イベント) {
     //現在のキー値を取得します。let value = event.target.dataset.value;
     // commit 経由で increment という名前のミューテーションを送信します
     this.$store.commit("増分", 値);
   }
 }

エクスポートデフォルト{
  計算: {
      カウント（）{
          this.$store.state.count を返します。
      }
  }
};  

デフォルトの新しいVuex.Storeをエクスポートします({
    //データ状態を保存する: {
        オブジェクト: {},
    },
    //4. コミットミューテーションのメソッドを使用してミューテーションを処理する: {
        getParam(状態、オブジェクト) {
            //5. 状態のデータを変更する state.obj = Object
        }
    },
    //2. ディスパッチアクションによって渡されたメソッドとパラメータを受け入れます: {
        getParamSync(ストア、オブジェクト) {
            // 非同期操作を処理する setTimeout(() => {
                //3. getParam というミューテーションをコミットで送信する
                //アクション関数はストアインスタンスオブジェクトを受け取るので、store.commitを呼び出して変更をコミットすることができます。
                store.commit('getParam', オブジェクト);
            }, 1000)
        }
    }
})

メソッド: {
   getVal() {
	  名前を 'xia' にします。
	  年齢を '26' とします。
	  sex = 'man' とします。
	  //1. getParamSyncメソッドと複数のパラメータ{name, age, sex}をディスパッチを通じてアクションに渡す
	  this.$store.dispatch('getParamSync',{名前、年齢、性別})
   }
}

'vue' から Vue をインポートします
'vuex' から Vuex をインポートします
'./state' から状態をインポートします
'./mutations' から変異をインポートします
'./actions' からアクションをインポートします
'./getters' から * をゲッターとしてインポートします。

moduleA を './module/moduleA' からインポート // モジュール A
moduleB を './module/moduleB' からインポート // モジュール B

Vue.use(Vuex)

デフォルトの新しいVuex.Storeをエクスポートします({
    行動、
    ゲッター、
    州、
    突然変異、
    モジュール:
        モジュールA、
        モジュールB
    }
})

// 各モジュールには独自の状態、ミューテーション、アクション、ゲッター、さらにはネストされたサブモジュールがあります export default {
    州： {
        テキスト: 'モジュールA'
    },
    ゲッター: {},
    変異: {},
    アクション: {}
}

<テンプレート>
	<div class="demo">
		<h1>{{getText1}}</h1>
		<h1>{{getText2}}</h1>
	</div>
</テンプレート>

計算: {
    getText1(){
    	this.$store.state.moduleA.text を返します。
    },
    // または ...mapState({
		getText2: 状態 => state.moduleB.text;
	})
}

import { mapMutations } from "vuex"; // mapMutations をインポートする
エクスポートデフォルト{
	メソッド: {
		...mapMutations({
		    // ミューテーション内の SET_NEWS に changeNews を関連付けます changeNews: "SET_NEWS"
		}）、
		提出する（）{
			// changeNewsという名前のミューテーションを送信し、パラメータvalを渡します
			let val = 'テストニュース';
			this.changeNews(val); // this.$store.commit("changeNews", val); と同等
		}
	}
}

import { mapGetters } from "vuex"; // mapGetters をインポートする 
エクスポートデフォルト{
	計算: {
        // vuex を使用してデータを読み取ります (getters.js 内のデータが読み取られます)
        // this.$store.getters.news と同等 (vuex 構文シュガー)
        ...mapGetters(["ニュース"])
	},
	作成された() {
        // ゲッターでニュースデータを取得します console.log(this.news);
	}
}

'vue' から Vue をインポートします
'vuex' から Vuex をインポートします
'./state' から状態をインポートします
'./mutations' から変異をインポートします
'./actions' からアクションをインポートします
'./getters' から * をゲッターとしてインポートします。

//状態が変更されるたびに、ログがコンソールに表示されます
'vuex/dist/logger' から createLogger をインポートします。

Vue.use(Vuex)

const debug = process.env.NODE_ENV !== 'production'

デフォルトの新しいVuex.Storeをエクスポートします({
	行動、
	ゲッター、
	州、
	突然変異、
	strict: debug, // debug=true の場合、厳密モードを有効にします (パフォーマンスの低下)
	プラグイン: デバッグ? [createLogger()]: []
})

定数状態 = {
	ニュース： {}
}

デフォルト状態をエクスポートします。

const 変異 = {
	SET_NEWS(状態、値) {
		状態.ニュース = val
	}
}

デフォルトのミューテーションをエクスポートします。

//非同期処理 const actions = {
    M_NEWS({コミット}, val) {
        commit('SET_NEWS', val); // ミューテーションをコミットする }
}

デフォルトのアクションをエクスポートします。

//通常はゲッターを介してデータを取得します (this.$store.getters.news;)
export const news = state => state.news // 他の処理を行わずに直接マップします

import store from './store' //vuexストレージファイル new Vue({
	el: '#app',
	ルーター、
	店、
	コンポーネント:
		アプリ
	},
	テンプレート: '<App/>'
})