目录
- 前言
- 一、4个map方法用途和概念
- 用途
- 1、mapState
- 2、mapGetters
- 3、mapActions
- 4、mapMutations
- 二、map方法案例练习
- 1、不用map方法
- 2、通过4个map方法实现
- 三、注意项
前言
看这篇文章的前提是我们已经掌握vuex和vuex中的getters,如果不了解,可以看这两篇 1、vuex安装和使用详解以及案例 2、vuex中的getter详解和案例练习
一、4个map方法用途和概念
用途
用来生成重复代码的,减少代码繁杂。 比如$store.state.sum在组件中多次调用,我们可以通过mapState函数返回一个对象sum,这样在组件使用的地方直接使用sum就行
1、mapState
① 官方说明:
当一个组件需要获取多个状态的时候,我们可以使用 mapState 辅助函数帮助我们生成计算属性,让你少按几次键
② 理解:用于映射state中的数据为计算属性 ③ 特点:mapState函数返回的是一个对象 ④ 2种书写方法: (当映射的计算属性的名称与 state 的子节点名称相同时,也可以给 mapState 传一个字符串数组。)
computed: {
//对象写法
...mapState({sum: "sum",num:"num"})
//字符串数组写法
...mapState(["sum", "num"]),
),
2、mapGetters
① 官方说明:
mapGetters辅助函数仅仅是将 store 中的 getter 映射到局部计算属性
② 理解:用于映射getters中的数据为计算属性 ③ 特点:mapGetter函数返回的是一个对象 ④ 2种写法
computed: {
//对象写法
...mapGetters({sum: "sum",num:"num"})
//字符串数组写法
...mapGetters(["sum", "num"]),
),
3、mapActions
① 官方说明:
mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用(需要先在根节点注入 store)
② 理解:用于生成与actions对话的方法,即包含 $store.dispatch(xxx) 的函数 ③ 特点:mapAction函数返回的是一个对象 ④ 2种写法
methods: {
//对象写法
...mapActions({add: "ADD",odd:"ODD"})
//字符串数组写法
...mapActions(["ADD", "ODD"]),
),
4、mapMutations
① 官方说明
mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用(需要在根节点注入 store)
② 理解:用于生成与mutations对话的方法,即包含 $store.commit(xxx) 的函数 ③ 特点:mapMutation函数返回的是一个对象 ④ 2种写法
methods: {
//对象写法
...mapMutations({add: "ADD",odd:"ODD"})
//字符串数组写法
...mapGetters(["ADD", "ODD"]),
),
二、map方法案例练习
需求:点击按钮求和
1、不用map方法
store/index.js代码
//引入vue
import Vue from "vue";
//引入vuex库
import Vuex from "vuex";
// 使用vuex
Vue.use(Vuex);
const actions = {
//数据需要业务逻辑判断
odd(context,num){
if(context.state.sum % 2 != 0) {
context.commit("ODD",num)
}
}
};
const mutations = {
ADD(state,num){
state.sum +=num;
},
ODD(state,num){
state.sum +=num;
}
};
const state = {
sum:0,
};
const getters = {
bigSum(state) {
return state.sum * 10
}
}
//暴露store
export default new Vuex.Store({
actions,
mutations,
state,
getters
})
组件count代码
<template>
<div>
<h3>当前求和为:{{$store.state.sum}}</h3>
<select @click="selectNum($event)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button @click="addNum(num)">+</button>
<button @click="oddNum">sum为奇数再加</button>
<h3>将sum放大十倍后的和为:{{$store.getters.bigSum}}</h3>
</div>
</template>
<script>
export default {
name: 'Count',
data(){
return {
num:1,
}
},
methods:{
selectNum(){
this.num = Number(event.target.value)
},
addNum(){
this.$store.commit("ADD",this.num)
},
oddNum(){
this.$store.dispatch("odd",this.num)
}
},
}
</script>
<style>
button {
margin-left: 5px;
}
</style>
运行结果
2、通过4个map方法实现
count组件代码如下(index.js代码不变)
<template>
<div>
<h3>当前求和为:{{sum}}</h3>
<select @click="selectNum($event)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button @click="addNum(num)">+</button>
<button @click="oddNum(num)">sum为奇数再加</button>
<h3>将sum放大十倍后的和为:{{$store.getters.bigSum}}</h3>
</div>
</template>
<script>
//引入4个map方法
import {mapState,mapGetters,mapActions,mapMutations} from "vuex";
export default {
name: 'Count',
data(){
return {
num:1,
}
},
methods:{
selectNum(){
this.num = Number(event.target.value)
},
//通过mapMutations生成与mutations对话的$store.commit(xxx)函数
...mapMutations({addNum:'ADD'}),
//通过mapActions生成与actions对话的$store.dispatch(xxx)函数
...mapActions({oddNum:"odd"})
},
computed:{
//通过mapState映射state中的数据为计算属性
...mapState(['sum']),
//通过mapGetters映射getters中的数据为计算属性
...mapGetters(['bigSum'])
}
}
</script>
<style>
button {
margin-left: 5px;
}
</style>
三、注意项
1、4个map方法返回值的都是一个对象
2、4个map方法都有两种写法,一种对象,一种字符串数组
3、mapState和mapGetter都是写在computed中,mapActions和mapMutations都是写在methods中
4、mapActions和mapMutation使用时,如果需要传递参数,需要在模板中绑定事件时传递好参数,否则参数将会是事件对象
当绑定事件不传递参数时,运行结果
5、mapState和mapGetters生成的结果在开发者工具的 vuex bindings 中显示