女為悅己者容，男為悅己者窮。?。?！
【23.Vuex中的四個map方法】
[可以去官網(wǎng)看看Vuex3文檔](Vuex 是什么？ | Vuex (vuejs.org))
1.vuex求和案例—getters版
- getters概念：當state中的數(shù)據(jù)需要經(jīng)過加工后再使用時，可以使用getters加工?！臼?store 的計算屬性】
- 【getters理解】：類似是Vuex中的計算屬性，也具有緩存功能：如果state中的數(shù)據(jù)得到了改變，那么getters中的屬性的值也會發(fā)生改變，如果state的值沒有發(fā)生任何變化，那么getters中的屬性，的值就不會發(fā)生改變。
store/index.js
- getters中配置的屬性
bigSum(a,b)，必須傳一個參數(shù)：state【這樣方便我們對vuex中的共享數(shù)據(jù)進行操作】；第二個參數(shù)：getters【可傳，可不傳】 
//準備getters——用于將state中的數(shù)據(jù)進行加工【配置定義getters】
const getters = {
bigSum(state) {
console.log('getters第一個參數(shù)：',state);
return state.sum*10
},
};
//準備state——用于存儲數(shù)據(jù)
//數(shù)據(jù)，相當于data
const state = {
sum: 0, //當前的和
};
//創(chuàng)建并暴露store
export default new Vuex.Store({
// property 簡寫 (用在對象某個 property 的 key 和被傳入的變量同名時)
actions,
mutations,
state,
// 在store中聲明getters
getters,
});
效果展示：
2.vuex求和案例—mapState和mapGetters版
1.mapGetters 輔助函數(shù)
將 store 中的 getters 映射到局部計算屬性。
-
mapGetters方法：用于幫助我們映射
getters中的數(shù)據(jù)為計算屬性
導入mapGetters
//幫助我們將store中的getters部分，映射到本組件中使用。
import { mapGetters } from 'vuex';
使用mapGetters的組件中
computed: {
//借助mapGetters生成計算屬性：bigSum（對象寫法）
...mapGetters({bigSum:'bigSum'}),
//借助mapGetters生成計算屬性：bigSum（數(shù)組寫法）
...mapGetters(['bigSum'])
},
- 詳細解讀一下代碼：
...mapGetters({bigSum:'bigSum'})
【…xxx】:對象運算符
【
mapGetters({bigSum:'bigSum'})】:就是下面代碼的簡寫形式bigSum(){ return this.$store.getters.bigSum },
【
mapGetters({bigSum:'bigSum'})】:不能簡寫成【mapGetters({bigSum})或mapGetters(){'bigSum'})】
{bigSum:'bigSum'}名字一樣的話，可以采用數(shù)組的方式簡寫：...mapGetters(['bigSum'])
2.mapState 輔助函數(shù)
將 store 中的 state 映射到局部計算屬性。
-
mapState方法：用于幫助我們映射
state中的數(shù)據(jù)為計算屬性
導入mapState
//幫助我們將store中的state部分，映射到本組件中使用。
import { mapGetters,mapState } from 'vuex';
使用mapState的組件中
computed: {
//借助mapState生成計算屬性，從state中讀取數(shù)據(jù)。（對象寫法）
...mapState({sum:'sum',Sjob:'Sjob',Sname:'Sname'}),
//借助mapState生成計算屬性，從state中讀取數(shù)據(jù)。（數(shù)組寫法）
...mapState(['sum','Sjob','Sname']),
},
- 詳細解讀一下代碼：
...mapState({sum:'sum',Sjob:'Sjob',Sname:'Sname'})
【…xxx】:對象運算符
【
mapState({sum:'sum',Sjob:'Sjob',Sname:'Sname'})】:就是下面代碼的簡寫形式sum(){ return this.$store.state.sum }, Sjob(){ return this.$store.state.Sjob }, Sname(){ return this.$store.state.Sname },
{sum:'sum',...}名字一樣的話，可以采用數(shù)組的方式簡寫：...mapState(['sum','Sjob','Sname'])
vuex求和案例—mapState和mapGetters版完整代碼：
Count.vue文章來源地址http://www.zghlxwxcb.cn/news/detail-527730.html
<template>
<div>
<h1>當前求和為：{{ sum }}</h1>
<h3 style="color: red">當前求和放大10倍為：{{ bigSum }}</h3>
<h3>我叫{{Sname}},是一名{{ Sjob }}</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">當前求和為奇數(shù)再加</button>
<button @click="incrementWait">等一等再加</button>
</div>
</template>
<script>
import { mapGetters,mapState } from 'vuex';
export default {
name: 'Count',
data() {
return {
n: 1,
};
},
computed: {
//#region
// 1.不借助mapGetters
/* bigSum() {
// console.log(this);
return this.$store.getters.bigSum;
}, */
//借助mapGetters生成計算屬性，從getters中讀取數(shù)據(jù)。（對象寫法）
// ...mapGetters({bigSum:'bigSum'})
//借助mapGetters生成計算屬性，從getters中讀取數(shù)據(jù)。（數(shù)組寫法）
...mapGetters(['bigSum']),
//#endregion
//#region
// 2.不借助mapState
/*sum(){
return this.$store.state.sum
},
Sjob(){
return this.$store.state.Sjob
},
Sname(){
return this.$store.state.Sname
}, */
//借助mapState生成計算屬性，從state中讀取數(shù)據(jù)。（對象寫法）
// ...mapState({sum:'sum',Sjob:'Sjob',Sname:'Sname'}),
//借助mapState生成計算屬性，從state中讀取數(shù)據(jù)。（數(shù)組寫法）
...mapState(['sum','Sjob','Sname']),
//#endregion
},
methods: {
increment() {
// 組件派發(fā)【dispatch】任務到actions,然后在actions中觸發(fā)mutations中的方法
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() {
console.log('Count', this.$store);
},
};
</script>
<style scoped>
button {
margin-left: 10px;
}
select {
margin-left: 20px;
}
</style>
store/index.js
//該文件用于創(chuàng)建Vuex中最為核心的store
import Vue from 'vue';
//引入Vuex
import Vuex from 'vuex';
//應用Vuex插件
Vue.use(Vuex);
//準備actions——用于響應組件中的動作【接收組件派發(fā)過來的方法】
const actions = {
jiaOdd(context, value) {
console.log('actions中的jiaOdd被調(diào)用了');
// 這里可以訪問到state里存儲的數(shù)據(jù) sum
if (context.state.sum % 2) {
context.commit('JIA', value);
}
},
jiaWait(context, value) {
console.log('actions中的jiaWait被調(diào)用了');
setTimeout(() => {
context.commit('JIA', value);
}, 500);
},
};
//準備mutations——用于操作數(shù)據(jù)（state）
const mutations = {
JIA(state, value) {
console.log('mutations中的JIA被調(diào)用了');
state.sum += value;
},
JIAN(state, value) {
console.log('mutations中的JIAN被調(diào)用了');
state.sum -= value;
},
};
//準備getters——用于將state中的數(shù)據(jù)進行加工【配置定義getters】
const getters = {
bigSum(state,getters) {
// console.log('getters第一個參數(shù)：',state);
// console.log('getters第二個參數(shù)：',getters);
return state.sum*10
},
};
//準備state——用于存儲數(shù)據(jù)
//數(shù)據(jù)，相當于data
const state = {
sum: 0, //當前的和
Sname:'伍六七',
Sjob:'理發(fā)師',
};
//創(chuàng)建并暴露store
export default new Vuex.Store({
// property 簡寫 (用在對象某個 property 的 key 和被傳入的變量同名時)
actions,
mutations,
state,
// 在store中聲明getters
getters,
});
3.vuex求和案例—mapMutations和mapActions版
1.mapMutations 輔助函數(shù)
將 store 中的 mutations 映射到局部方法。
-
mapMutations方法：用于幫助我們在組件中生成與
mutations對話的方法，即：包含$store.commit(xxx)的函數(shù)
導入mapMutations
//幫助我們將store中的mutations部分，映射到本組件中使用。
import { mapMutations } from 'vuex';
使用mapMutations的組件中
methods:{
//借助mapMutations生成對應的方法，方法中會調(diào)用commit去聯(lián)系mutations(對象寫法)
...mapMutations({ increment: 'JIA', decrement: 'JIAN' }),
//借助mapMutations生成對應的方法，方法中會調(diào)用commit去聯(lián)系mutations(數(shù)組寫法)
...mapMutations([ 'JIA', 'JIAN' ]),
}
- 詳細解讀一下代碼：
...mapMutations({ increment: 'JIA', decrement: 'JIAN' })
【…xxx】:對象運算符
【
mapMutations({ increment: 'JIA', decrement: 'JIAN' })】:就是下面代碼的簡寫形式【再拆解一下】
- increment----->increment() {}
- ‘JIA’----> this.$store.commit(‘JIA’)
increment() { // 組件派發(fā)【dispatch】任務到actions,然后在actions中觸發(fā)mutations中的方法 this.$store.commit('JIA'); }, decrement() { this.$store.commit('JIAN'); },
- 但是，我們發(fā)現(xiàn)commit中沒有傳數(shù)據(jù)，所以我們看到頁面展示如下：
- 那么，我們?nèi)绾尾拍馨褦?shù)據(jù)傳遞過去呢？
我們看一下官網(wǎng)給的例子：
methods: { ...mapMutations([ 'increment', // 將 `this.increment()` 映射為 `this.$store.commit('increment')` // `mapMutations` 也支持載荷： 'incrementBy' // 將 `this.incrementBy(amount)` 映射為 // `this.$store.commit('incrementBy', amount)` ]),所以，可以這樣傳遞數(shù)據(jù)：
increment()---->increment(n)<button @click="increment(n)">+</button>methods:{ //借助mapMutations生成對應的方法，方法中會調(diào)用commit去聯(lián)系mutations(對象寫法) ...mapMutations({ increment: 'JIA'}), }所以，映射后：
increment(n) + { increment: 'JIA'}---映射成--->下面的代碼increment(n) { // 組件派發(fā)【dispatch】任務到actions,然后在actions中觸發(fā)mutations中的方法 this.$store.commit('JIA',n); },最后，去mutations中調(diào)用字符串事件JIA。
2.mapActions 輔助函數(shù)
將 store 中的 actions 映射到局部方法。
-
mapActions方法：用于幫助我們在組件中生成與
actions對話的方法，即：包含$store.dispatch(xxx)的函數(shù)
導入mapActions
//幫助我們將store中的actions部分，映射到本組件中使用。
import { mapActions } from 'vuex';
使用mapActions的組件中
methods:{
//借助mapActions生成對應的方法，方法中會調(diào)用dispatch去聯(lián)系actions(對象寫法)
...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
//借助mapActions生成對應的方法，方法中會調(diào)用dispatch去聯(lián)系actions(數(shù)組寫法)
// ...mapActions(['jiaOdd','jiaWait'])
}
- 代碼我們就不解讀：和mapMutations一樣。
備注：mapActions與mapMutations使用時，若需要傳遞參數(shù)需要：在模板中綁定事件時傳遞好參數(shù)，否則參數(shù)是事件對象。
vuex求和案例—mapActions和mapMutations版完整代碼：文章來源：http://www.zghlxwxcb.cn/news/detail-527730.html
Count.vue
<template>
<div>
<h1>當前求和為：{{ sum }}</h1>
<h3 style="color: red">當前求和放大10倍為：{{ bigSum }}</h3>
<h3>我叫{{ Sname }},是一名{{ Sjob }}</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(n)">+</button>
<button @click="decrement(n)">-</button>
<button @click="incrementOdd(n)">當前求和為奇數(shù)再加</button>
<button @click="incrementWait(n)">等一等再加</button>
</div>
</template>
<script>
import { mapGetters, mapState, mapMutations, mapActions } from 'vuex';
export default {
name: 'Count',
data() {
return {
n: 1,
};
},
computed: {
//#region
//借助mapGetters生成計算屬性，從getters中讀取數(shù)據(jù)。（對象寫法）
// ...mapGetters({bigSum:'bigSum'})
//借助mapGetters生成計算屬性，從getters中讀取數(shù)據(jù)。（數(shù)組寫法）
...mapGetters(['bigSum']),
//#endregion
//#region
// 2.不借助mapState
/* sum(){
return this.$store.state.sum
},
Sjob(){
return this.$store.state.Sjob
},
Sname(){
return this.$store.state.Sname
}, */
//借助mapState生成計算屬性，從state中讀取數(shù)據(jù)。（對象寫法）
// ...mapState({sum:'sum',Sjob:'Sjob',Sname:'Sname'}),
//借助mapState生成計算屬性，從state中讀取數(shù)據(jù)。（數(shù)組寫法）
...mapState(['sum', 'Sjob', 'Sname']),
//#endregion
},
methods: {
//*************程序員親自寫方法******************
/* increment() {
// 組件派發(fā)【dispatch】任務到actions,然后在actions中觸發(fā)mutations中的方法
this.$store.commit('JIA', this.n);
},
decrement() {
this.$store.commit('JIAN', this.n);
},*/
//**********借助mapMutations方法****************
//借助mapMutations生成對應的方法，方法中會調(diào)用commit去聯(lián)系mutations(對象寫法)
...mapMutations({ increment: 'JIA', decrement: 'JIAN' }),
//借助mapMutations生成對應的方法，方法中會調(diào)用commit去聯(lián)系mutations(數(shù)組寫法)
// ...mapMutations([ 'JIA', 'JIAN' ]),
//*************程序員親自寫方法******************
/* incrementOdd() {
this.$store.dispatch('jiaOdd', this.n);
},
incrementWait() {
this.$store.dispatch('jiaWait', this.n);
}, */
//**********借助mapMutations方法****************
//借助mapActions生成對應的方法，方法中會調(diào)用dispatch去聯(lián)系actions(對象寫法)
...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
//借助mapActions生成對應的方法，方法中會調(diào)用dispatch去聯(lián)系actions(數(shù)組寫法)
// ...mapActions(['jiaOdd','jiaWait'])
},
mounted() {
console.log('Count', this.$store);
},
};
</script>
<style scoped>
button {
margin-left: 10px;
}
select {
margin-left: 20px;
}
</style>
到了這里，關于前端vue入門(純代碼)22_四個map的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
