Vuex中四个map方法的使用 mapState mapGetters mapActions mapMutations

1. 1. mapState 方法
2. 2. mapGetters 方法
• 例子
• 不用mapState，mapGetters方法，原始写：
• 用 mapState,mapGetters 方法写
3. 3. mapActions 方法
4. 4. mapMutations 方法
• 例子：
• 不用 mapMutations,mapActions
• 用 mapMutations,mapActions
5. 总代码

1. mapState 方法

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

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

2. mapGetters 方法

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

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

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

例子

不用mapState，mapGetters方法，原始写：

<template>
    <div>
	<h1>当前求和为：{{$store.state.sum}}</h1>
	<h3>当前求和放大 10 倍为：{{$store.getters.bigSum}}</h3>
	<h3>我在{{$store.state.school}}，学习{{$store.state.subject}}</h3>	
    </div>
</template>

<script>
    export default {
	name:'Count',
    }
</script>

store/index.js：

//该文件用于创建 vuex 中最为核心的 store
import Vue from 'vue'
//引入 Vuex
import Vuex from 'vuex'
//应用 Vuex 插件
Vue.use(Vuex)

//准备 state——用于存储数据
const state = {
    sum:1, //当前的和
    school:'尚硅谷',
    subject:'前端'
}
//准备 getters——用于将 state 中的数据进行加工
const getters = {
   bigSum(state){
	return state.sum*10
    }
}

//创建并暴露 store
export default new Vuex.Store({
    state,
    getters
})

用 mapState,mapGetters 方法写

count.vue

<template>
    <div>
	<h1>当前求和为：{{sum}}</h1>
	<h3>当前求和放大 10 倍为：{{bigSum}}</h3>
	<h3>我在{{school}}，学习{{subject}}</h3>	
    </div>
</template>

<script>
    import {mapState,mapGetters} from 'vuex'
    export default {
	name:'Count',
	data() {
	    return {
		n:1, //用户选择的数字
            }
	},
	computed:{
            //借助 mapState 生成计算属性，从 state 中读取数据。（对象写法）
	    // ...mapState({sum:'sum',school:'school',subject:'subject'}),

	    //借助 mapState 生成计算属性，从 state 中读取数据。（数组写法）
	    ...mapState(['sum','school','subject']),

	    //借助 mapGetters 生成计算属性，从 getters 中读取数据。（对象写法）
	    // ...mapGetters({bigSum:'bigSum'})
			
	    //借助 mapGetters 生成计算属性，从 getters 中读取数据。（数组写法）
	    ...mapGetters(['bigSum'])
	},	
   }
</script>

store/index.js

//该文件用于创建 Vuex 中最为核心的 store
import Vue from 'vue'
//引入 Vuex
import Vuex from 'vuex'
//应用 Vuex 插件
Vue.use(Vuex)

//准备 state——用于存储数据
const state = {
    sum:1, //当前的和
    school:'尚硅谷',
    subject:'前端'
}
//准备 getters——用于将 state 中的数据进行加工
const getters = {
    bigSum(state){
	return state.sum*10
    }
}

//创建并暴露 store
export default new Vuex.Store({
    state,
    getters
})