mapState辅助函数
作用:处理state中的函数
使用有两步:
1.引入mapstate函数
2.在计算属性中使用辅助函数
<template>
<h1>mapstate辅助函数:{{num}}</h1>
</template>
<script>
// 1.引入mapstate函数
import {mapState} from 'vuex'
export default{
name:"mapState",
data(){
return{};
},
// 2.在计算属性中使用辅助函数
computed:{
...mapState(['num'])
}
}
</script>
使用对比:
使用之前:<h1>{{$store.state.num}}</h1>
使用之后:<h1>{{num}}</h1>
mapGetters辅助函数
作用:处理getters属性中的数据,使用方法和mapState一样,都是在computed
<template>
<div>
<h1>mapstate辅助函数:{{num}}</h1>
<h1>mapGetters辅助函数:{{newnum}}</h1>
</div>
</template>
<script>
// 1.引入mapstate函数
import {mapState,mapGetters} from 'vuex'
export default{
name:"mapState",
data(){
return{};
},
// 2.在计算属性中使用辅助函数
computed:{
...mapState(['num']),
...mapGetters(['newnum'])
}
}
</script>
mapMutations辅助函数
作用:作用是把store中Mutations内的方法映射到组件methods属性中,可以在组件中直接使用Mutations中的方法。
<template>
<div>
<input type="text" :value="$store.state.num" />
<!-- 3.绑定单击事件 -->
<input type="button" @click="addnum" value="+1"/>
</div>
</template>
<script>
// 1.引入mapstate函数
import {mapMutations} from 'vuex'
export default{
name:"mapMutations",
data(){
return{};
},
methods:{
// 2.在methods中使用mapMutations
...mapMutations(['getAdd']),
addnum(){
// 4.直接使用mapMutations结构的方法
this.getAdd()
}
}
}
</script>
mapActions辅助函数
作用:作用是把store中actions内的方法映射到组件methods属性中,可以在组件中直接使用actions中的方法。
<template>
<div>
<input type="text" :value="$store.state.num" />
<!-- 3.绑定单击事件 -->
<input type="button" @click="addnum" value="+1"/>
</div>
</template>
<script>
// 1.引入mapstate函数
import {mapMutations,mapActions} from 'vuex'
export default{
name:"mapMutations",
data(){
return{};
},
methods:{
// 2.在methods中使用mapMutations
...mapMutations(['getAdd']),
...mapActions(['getAddActions']),
addnum(){
// 4.直接使用mapMutations结构的方法
this.getAddActions()
}
}
}
</script>