前端vue入门(纯代码)22

女为悦己者容，男为悦己者穷。！！！

【`23.Vuex中的四个map方法`】

[可以去官网看看Vuex3文档](Vuex 是什么？ | Vuex (vuejs.org))

1.vuex求和案例—getters版

getters概念：当state中的数据需要经过加工后再使用时，可以使用getters加工。【是 store 的计算属性】
【getters理解】：类似是Vuex中的计算属性，也具有缓存功能：如果state中的数据得到了改变，那么getters中的属性的值也会发生改变，如果state的值没有发生任何变化，那么getters中的属性，的值就不会发生改变。

store/index.js

getters中配置的属性bigSum(a,b)，必须传一个参数：state【这样方便我们对vuex中的共享数据进行操作】；第二个参数：getters【可传，可不传】

//准备getters——用于将state中的数据进行加工【配置定义getters】
const getters = {bigSum(state) {console.log('getters第一个参数：',state);return state.sum*10},
};
//准备state——用于存储数据
//数据，相当于data
const state = {sum: 0, //当前的和
};//创建并暴露store
export default new Vuex.Store({// property 简写 (用在对象某个 property 的 key 和被传入的变量同名时)actions,mutations,state,// 在store中声明gettersgetters,
});

效果展示：

2.vuex求和案例—mapState和mapGetters版

1.`mapGetters` 辅助函数

将 store 中的 getters 映射到局部计算属性。

mapGetters方法：用于帮助我们映射getters中的数据为计算属性

导入mapGetters

//帮助我们将store中的getters部分，映射到本组件中使用。
import { mapGetters } from 'vuex';

使用mapGetters的组件中

computed: {//借助mapGetters生成计算属性：bigSum（对象写法）...mapGetters({bigSum:'bigSum'}),//借助mapGetters生成计算属性：bigSum（数组写法）...mapGetters(['bigSum'])
},

详细解读一下代码：...mapGetters({bigSum:'bigSum'})

【…xxx】:对象运算符

【mapGetters({bigSum:'bigSum'})】:就是下面代码的简写形式
bigSum(){return this.$store.getters.bigSum
}, 
【mapGetters({bigSum:'bigSum'})】:不能简写成【mapGetters({bigSum})或mapGetters(){'bigSum'})】

{bigSum:'bigSum'}名字一样的话，可以采用数组的方式简写：...mapGetters(['bigSum'])

2.`mapState` 辅助函数

将 store 中的 state 映射到局部计算属性。

mapState方法：用于帮助我们映射state中的数据为计算属性

导入mapState

//帮助我们将store中的state部分，映射到本组件中使用。
import { mapGetters,mapState } from 'vuex';

使用mapState的组件中

computed: {//借助mapState生成计算属性，从state中读取数据。（对象写法）...mapState({sum:'sum',Sjob:'Sjob',Sname:'Sname'}),//借助mapState生成计算属性，从state中读取数据。（数组写法）...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',...}名字一样的话，可以采用数组的方式简写：...mapState(['sum','Sjob','Sname'])

vuex求和案例—mapState和mapGetters版完整代码：

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">+</button><button @click="decrement">-</button><button @click="incrementOdd">当前求和为奇数再加</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中读取数据。（对象写法）// ...mapGetters({bigSum:'bigSum'})//借助mapGetters生成计算属性，从getters中读取数据。（数组写法）...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中读取数据。（对象写法）// ...mapState({sum:'sum',Sjob:'Sjob',Sname:'Sname'}),//借助mapState生成计算属性，从state中读取数据。（数组写法）...mapState(['sum','Sjob','Sname']),//#endregion},methods: {increment() {// 组件派发【dispatch】任务到actions,然后在actions中触发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

//该文件用于创建Vuex中最为核心的store
import Vue from 'vue';
//引入Vuex
import Vuex from 'vuex';
//应用Vuex插件
Vue.use(Vuex);//准备actions——用于响应组件中的动作【接收组件派发过来的方法】
const actions = {jiaOdd(context, value) {console.log('actions中的jiaOdd被调用了');// 这里可以访问到state里存储的数据 sumif (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;},
};
//准备getters——用于将state中的数据进行加工【配置定义getters】
const getters = {bigSum(state,getters) {// console.log('getters第一个参数：',state);// console.log('getters第二个参数：',getters);return state.sum*10},
};
//准备state——用于存储数据
//数据，相当于data
const state = {sum: 0, //当前的和Sname:'伍六七',Sjob:'理发师',
};//创建并暴露store
export default new Vuex.Store({// property 简写 (用在对象某个 property 的 key 和被传入的变量同名时)actions,mutations,state,// 在store中声明gettersgetters,
});

3.vuex求和案例—mapMutations和mapActions版

1.`mapMutations` 辅助函数

将 store 中的 mutations 映射到局部方法。

mapMutations方法：用于帮助我们在组件中生成与mutations对话的方法，即：包含$store.commit(xxx)的函数

导入mapMutations

//帮助我们将store中的mutations部分，映射到本组件中使用。
import { mapMutations } from 'vuex';

使用mapMutations的组件中

methods:{//借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)...mapMutations({ increment: 'JIA', decrement: 'JIAN' }),//借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(数组写法)...mapMutations([ 'JIA', 'JIAN' ]),
}

详细解读一下代码：...mapMutations({ increment: 'JIA', decrement: 'JIAN' })

【…xxx】:对象运算符

【mapMutations({ increment: 'JIA', decrement: 'JIAN' })】:就是下面代码的简写形式

【再拆解一下】

increment----->increment() {}
‘JIA’----> this.$store.commit(‘JIA’)
increment() {// 组件派发【dispatch】任务到actions,然后在actions中触发mutations中的方法this.$store.commit('JIA');
},
decrement() {this.$store.commit('JIAN');
},
但是，我们发现commit中没有传数据，所以我们看到页面展示如下：

那么，我们如何才能把数据传递过去呢？
我们看一下官网给的例子：
methods: {...mapMutations(['increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`// `mapMutations` 也支持载荷：'incrementBy' //  将 `this.incrementBy(amount)` 映射为 // `this.$store.commit('incrementBy', amount)`]),
所以，可以这样传递数据：increment()---->increment(n)
<button @click="increment(n)">+</button>
methods:{//借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)...mapMutations({ increment: 'JIA'}),
}
所以，映射后：increment(n) + { increment: 'JIA'}---映射成--->下面的代码
increment(n) {// 组件派发【dispatch】任务到actions,然后在actions中触发mutations中的方法this.$store.commit('JIA',n);
},
最后，去mutations中调用字符串事件JIA。

2.`mapActions` 辅助函数

将 store 中的 actions 映射到局部方法。

mapActions方法：用于帮助我们在组件中生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数

导入mapActions

//帮助我们将store中的actions部分，映射到本组件中使用。
import { mapActions } from 'vuex';

使用mapActions的组件中

methods:{//借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法)...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})//借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(数组写法)// ...mapActions(['jiaOdd','jiaWait'])
}

代码我们就不解读：和mapMutations一样。

备注：mapActions与mapMutations使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则参数是事件对象。

vuex求和案例—mapActions和mapMutations版完整代码：

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)">当前求和为奇数再加</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中读取数据。（对象写法）// ...mapGetters({bigSum:'bigSum'})//借助mapGetters生成计算属性，从getters中读取数据。（数组写法）...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中读取数据。（对象写法）// ...mapState({sum:'sum',Sjob:'Sjob',Sname:'Sname'}),//借助mapState生成计算属性，从state中读取数据。（数组写法）...mapState(['sum', 'Sjob', 'Sname']),//#endregion},methods: {//*************程序员亲自写方法******************/* increment() {// 组件派发【dispatch】任务到actions,然后在actions中触发mutations中的方法this.$store.commit('JIA', this.n);},decrement() {this.$store.commit('JIAN', this.n);},*///**********借助mapMutations方法****************//借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)...mapMutations({ increment: 'JIA', decrement: 'JIAN' }),//借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(数组写法)// ...mapMutations([ 'JIA', 'JIAN' ]),//*************程序员亲自写方法******************/* incrementOdd() {this.$store.dispatch('jiaOdd', this.n);},incrementWait() {this.$store.dispatch('jiaWait', this.n);}, *///**********借助mapMutations方法****************//借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法)...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})//借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(数组写法)// ...mapActions(['jiaOdd','jiaWait'])},mounted() {console.log('Count', this.$store);},
};
</script><style scoped>
button {margin-left: 10px;
}
select {margin-left: 20px;
}
</style>

前端vue入门(纯代码)22_四个map

女为悦己者容，男为悦己者穷。！！！

【`23.Vuex中的四个map方法`】

1.vuex求和案例—getters版

2.vuex求和案例—mapState和mapGetters版

1.`mapGetters` 辅助函数

2.`mapState` 辅助函数

3.vuex求和案例—mapMutations和mapActions版

1.`mapMutations` 辅助函数

2.`mapActions` 辅助函数

相关文章

18-Linux 常用命令

n位吸血鬼数字的算法

吸血鬼数字（多种解法）

中华吸血鬼病毒专杀

神话与历史中的吸血鬼

吸血鬼的故事

中华吸血鬼分析

什么是吸血鬼

前端vue入门(纯代码)22_四个map

女为悦己者容，男为悦己者穷。！！！

【23.Vuex中的四个map方法】

1.vuex求和案例—getters版

2.vuex求和案例—mapState和mapGetters版

1.mapGetters 辅助函数

2.mapState 辅助函数

3.vuex求和案例—mapMutations和mapActions版

1.mapMutations 辅助函数

2.mapActions 辅助函数

相关文章

【`23.Vuex中的四个map方法`】

1.`mapGetters` 辅助函数

2.`mapState` 辅助函数

1.`mapMutations` 辅助函数

2.`mapActions` 辅助函数