Vue入門026- 求和案例_vuex版（mapState與mapGetters的使用）

1. mapState方法：用于幫助我們映射state中的資料為計算屬性

computed: {
//借助mapState生成計算屬性：sum、school、subject（對象寫法）
...mapState({sum:'sum',school:'school',subject:'subject'}),
//借助mapState生成計算屬性：sum、school、subject（數組寫法）
...mapState(['sum','school','subject']),
},           

2. mapGetters方法：用于幫助我們映射getters中的資料為計算屬性

computed: {
//借助mapGetters生成計算屬性：bigSum（對象寫法）
...mapGetters({bigSum:'bigSum'}),

//借助mapGetters生成計算屬性：bigSum（數組寫法）
...mapGetters(['bigSum'])
},           

3. mapActions方法：用于幫助我們生成與actions對話的方法，即：包含$store.dispatch(xxx)的函數

methods:{
//靠mapActions生成：incrementOdd、incrementWait（對象形式）
...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

//靠mapActions生成：incrementOdd、incrementWait（數組形式）
...mapActions(['jiaOdd','jiaWait'])
}           

4. mapMutations方法：用于幫助我們生成與mutations對話的方法，即：包含$store.commit(xxx)的函數

methods:{
//靠mapActions生成：increment、decrement（對象形式）
...mapMutations({increment:'JIA',decrement:'JIAN'}),

//靠mapMutations生成：JIA、JIAN（對象形式）
...mapMutations(['JIA','JIAN']),
}           

備注：mapActions與mapMutations使用時，若需要傳遞參數需要：在模闆中綁定事件時傳遞好參數，否則參數是事件對象。

這裡是示範 mapState mapGetters 的使用

store/index.js

//該檔案用于建立Vuex中最為核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//應用Vuex插件
Vue.use(Vuex)

//準備actions——用于響應元件中的動作
const actions = {
	/* jia(context,value){
		console.log('actions中的jia被調用了')
		context.commit('JIA',value)
	},
	jian(context,value){
		console.log('actions中的jian被調用了')
		context.commit('JIAN',value)
	}, */
	jiaOdd(context,value){
		console.log('actions中的jiaOdd被調用了')
		if(context.state.sum % 2){
			context.commit('JIA',value)
		}
	},
	jiaWait(context,value){
		console.log('actions中的jiaWait被調用了')
		setTimeout(()=>{
			context.commit('JIA',value)
		},500)
	}
}
//準備mutations——用于操作資料（state）
const mutations = {
	JIA(state,value){
		console.log('mutations中的JIA被調用了')
		state.sum += value
	},
	JIAN(state,value){
		console.log('mutations中的JIAN被調用了')
		state.sum -= value
	}
}
//準備state——用于存儲資料
const state = {
	sum:0, //目前的和
	school:'尚矽谷',
	subject:'前端'
}

//準備getters——用于将state中的資料進行加工
const getters = {
	bigSum(state){
		return state.sum*10
	}
}

//建立并暴露store
export default new Vuex.Store({
	actions,
	mutations,
	state,
	getters
})           

Count.vue 元件

<template>
	<div>
		<h1>目前求和為：{{sum}}</h1>
		<h3>目前求和放大10倍為：{{bigSum}}</h3>
		<h3>我在{{school}}，學習{{subject}}</h3>
		<select v-model.number="n">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
		</select>
		<button @click="increment">+</button>
		<button @click="decrement">-</button>
		<button @click="incrementOdd">目前求和為奇數再加</button>
		<button @click="incrementWait">等一等再加</button>
	</div>
</template>

<script>
	import {mapState,mapGetters} from 'vuex'
	export default {
		name:'Count',
		data() {
			return {
				n:1, //使用者選擇的數字
			}
		},
		computed:{
			//靠程式員自己親自去寫計算屬性
			/* sum(){
				return this.$store.state.sum
			},
			school(){
				return this.$store.state.school
			},
			subject(){
				return this.$store.state.subject
			}, */

			//借助mapState生成計算屬性，從state中讀取資料。（對象寫法）
			// ...mapState({he:'sum',xuexiao:'school',xueke:'subject'}),

			//借助mapState生成計算屬性，從state中讀取資料。（數組寫法）
			...mapState(['sum','school','subject']),

			/* ******************************************************************** */

			/* bigSum(){
				return this.$store.getters.bigSum
			}, */

			//借助mapGetters生成計算屬性，從getters中讀取資料。（對象寫法）
			// ...mapGetters({bigSum:'bigSum'})
			
			//借助mapGetters生成計算屬性，從getters中讀取資料。（數組寫法）
			...mapGetters(['bigSum'])

		},
		methods: {
			increment(){
				this.$store.commit('JIA',this.n)
			},
			decrement(){
				this.$store.commit('JIAN',this.n)
			},
			incrementOdd(){
				this.$store.dispatch('jiaOdd',this.n)
			},
			incrementWait(){
				this.$store.dispatch('jiaWait',this.n)
			},
		},
		mounted() {
			const x = mapState({he:'sum',xuexiao:'school',xueke:'subject'})
			console.log(x)
		},
	}
</script>

<style lang="css">
	button{
		margin-left: 5px;
	}
</style>
           

代碼摘錄于尚矽谷Vue學習課件