Vuex のコアコンセプトと基本的な使用法の詳細な説明

<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>

npm インストール vuex --save

糸を追加するvuex

'vue' から Vue をインポートします
'vuex' から Vuex をインポートします
Vue.use(Vuex)
デフォルトの新しいVuex.Storeをエクスポートします({
州： {}、
変異: {},
アクション: {},
モジュール: {}
})

'vue' から Vue をインポートします
'./store' からストアをインポートします
新しいVue({
  レンダリング: h => h(App),
  店
}).$mount('#app')

州： {
  番号: 0
}

<div>{{ numAlias ​​}}</div>

'vuex' から { mapState } をインポートします。
エクスポートデフォルト{
  //計算関数が計算されます: mapState({
    // 文字列パラメータ 'count' を渡すことは `state => state.count` と同等です
    numAlias: 'num', // 共通キーは自分で付ける名前、値は受け取るデータです // 矢印関数を使用するとコードをより簡潔にすることができます count: state => state.count,
    // `this` を使用してローカル状態を取得できるようにするには、通常の関数 countPlusLocalState (state) { を使用する必要があります。
      state.count + this.localCount を返す
    }
    //他の計算関数を定義することもできます}),
  // または次のように // 計算された関数は次のように計算されます: {
    mapState(['count'])
  }
}

<div>{{ $store.state.count }}</div>

突然変異:
	//カスタムメソッドを増分します。ストアパラメータはストアデータ、パラメータパラメータは受信データです。増分しません (状態、パラメータ) {
        // 状態の変更 state.num++
    }
}

'vuex' から { mapState, mapMutations } をインポートします。
//メソッド: {
	...mapMutations([
	    // ミューテーションカスタムメソッド名 'increment'
    ]）、
    愛（） {
    	// 直接 this.increment('渡す必要のあるデータは必要ありません') を呼び出します
        this.increment('ビン')
    }
}

メソッド: {
    愛（） {
    	// this.$store.commit('カスタム名', '渡されたデータは渡されない可能性があります')
    	this.$store.commit('増分', 'データ')
    }
}

突然変異:
	//カスタムメソッドを増分します。ストアパラメータはストアデータ、パラメータパラメータは受信データです。増分しません (状態、パラメータ) {
        // 状態の変更 state.num++
    }
},
アクション: {
	//カスタムメソッドを追加します。コンテキストはパラメータなので、vuexのインスタンスとして扱うことができます。add(context) {
    	//context.commit('ミューテーションで呼び出されるメソッド') を使用できます
    	context.commit('増分')
    }
}

'vuex' から { mapState、mapMutations、mapActions } をインポートします。
エクスポートデフォルト{
  メソッド: {
    ...マップアクション([
      'add', // `this.add()` を `this.$store.dispatch('add')` にマップします
      // `mapActions` はペイロードもサポートします:
      'add' // `this.add(amount)` を `this.$store.dispatch('add', amount)` にマッピングします
    ]）、
    ...マップアクション({
      add: 'add' // `this.add()` を `this.$store.dispatch('increment')` にマップします
    }）、
    愛（） {
    	// this.add('渡す必要のあるデータは必要ありません') を直接呼び出します
    	this.add(データ)
    }
  }
}

メソッド: {
    愛（） {
    	// this.$store.dispatch('カスタム名', '渡されたデータは渡されない可能性があります')
    	this.$store.dispatch('add', データ)
    }
}

州： {
  番号: 0
},
ゲッター: {
    完了Todos: 状態 => {
    	状態.num = 10 を返す
    }
}

<div>{{ 完了したすべての作業 }}</div>

'vuex' から { mapState、mapMutations、mapActions、mapGetters } をインポートします。
エクスポートデフォルト{
  //計算関数が計算されます: {
  	...mapState(['count'])、
  	...mapmapGetters(['doneTodos'])
  }
}

<div>{{ $store.getters.doneTodos }}</div>