快捷導(dǎo)航

vue中g(shù)etters的使用與四個map方法的使用方式

更新時間：2024年01月22日 10:42:01 作者：小付學(xué)代碼

這篇文章主要介紹了vue中g(shù)etters的使用與四個map方法的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

getters方法的使用

### getters的使用
 
1. 概念：當(dāng)state中的數(shù)據(jù)需要經(jīng)過加工后再使用時，可以使用getters加工。
 
2. 在```store.js```中追加```getters```配置
 
   ```js
   ......
   
   const getters = {
   	bigSum(state){
   		return state.sum * 10
   	}
   }
   
   //創(chuàng)建并暴露store
   export default new Vuex.Store({
   	......
   	getters
   })
   ```
 
3. 組件中讀取數(shù)據(jù)：```$store.getters.bigSum```

四個map方法的使用

### 四個map方法的使用
 
1. <strong>mapState方法：</strong>用于幫助我們映射```state```中的數(shù)據(jù)為計算屬性
 
   ```js
   computed: {
       //借助mapState生成計算屬性：sum、school、subject（對象寫法）
        ...mapState({sum:'sum',school:'school',subject:'subject'}),
            
       //借助mapState生成計算屬性：sum、school、subject（數(shù)組寫法）
       ...mapState(['sum','school','subject']),
   },
   ```
 
2. <strong>mapGetters方法：</strong>用于幫助我們映射```getters```中的數(shù)據(jù)為計算屬性
 
   ```js
   computed: {
       //借助mapGetters生成計算屬性：bigSum（對象寫法）
       ...mapGetters({bigSum:'bigSum'}),
   
       //借助mapGetters生成計算屬性：bigSum（數(shù)組寫法）
       ...mapGetters(['bigSum'])
   },
   ```
 
3. <strong>mapActions方法：</strong>用于幫助我們生成與```actions```對話的方法，即：包含```$store.dispatch(xxx)```的函數(shù)
 
   ```js
   methods:{
       //靠mapActions生成：incrementOdd、incrementWait（對象形式）
       ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
   
       //靠mapActions生成：incrementOdd、incrementWait（數(shù)組形式）
       ...mapActions(['jiaOdd','jiaWait'])
   }
   ```
 
4. <strong>mapMutations方法：</strong>用于幫助我們生成與```mutations```對話的方法，即：包含```$store.commit(xxx)```的函數(shù)
 
   ```js
   methods:{
       //靠mapActions生成：increment、decrement（對象形式）
       ...mapMutations({increment:'JIA',decrement:'JIAN'}),
       
       //靠mapMutations生成：JIA、JIAN（對象形式）
       ...mapMutations(['JIA','JIAN']),
   }
   ```
 
> 備注：mapActions與mapMutations使用時，若需要傳遞參數(shù)需要：在模板中綁定事件時傳遞好參數(shù)，否則參數(shù)是事件對象。

承接上一篇的Count.vue，更改插值語法中的{{$store.state.sum}}下邊用計算屬性來做更改。

<template>
	<div>
		<h1>當(dāng)前求和為：{{sum}}</h1>
		<h3>當(dāng)前求和放大10倍為：{{bigSum}}</h3>
		<h3>我在{{school}}，學(xué)習(xí){{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">當(dāng)前求和為奇數(shù)再加</button>
		<button @click="incrementWait">等一等再加</button>
	</div>
</template>
 
<script>
	import {mapState,mapGetters} from 'vuex'
	export default {
		name:'Count',
		data() {
			return {
				n:1, //用戶選擇的數(shù)字
			}
		},
		computed:{
			//靠程序員自己親自去寫計算屬性
			/* sum(){
				return this.$store.state.sum
			},
			school(){
				return this.$store.state.school
			},
			subject(){
				return this.$store.state.subject
			}, */
 
			//借助mapState生成計算屬性，從state中讀取數(shù)據(jù)。（對象寫法）
			// ...mapState({he:'sum',xuexiao:'school',xueke:'subject'}),
 
			//借助mapState生成計算屬性，從state中讀取數(shù)據(jù)。（數(shù)組寫法）
			...mapState(['sum','school','subject']),
 
			/* ******************************************************************** */
 
			/* bigSum(){
				return this.$store.getters.bigSum
			}, */
 
			//借助mapGetters生成計算屬性，從getters中讀取數(shù)據(jù)。（對象寫法）
			// ...mapGetters({bigSum:'bigSum'})
			
			//借助mapGetters生成計算屬性，從getters中讀取數(shù)據(jù)。（數(shù)組寫法）
			...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>