Vue学习笔记-Vuex四个map方法的使用

在组件中导入方法

import {mapState,mapGetters,mapActions,mapMutations} from 'vuex'

mapState方法的使用

注意：这里的…是ES6语法，表示将该的对象所有属性展开，放入其所在上级对象中

......
computed:{
	//借助mapState生成计算属性，从Vuex中的state对象中读取数据（对象写法）
	...mapState({sum:'sum',school:'school',subject:'subject'})
	//借助mapState生成计算属性，从Vuex中的state对象中读取数据（数组写法）
    ...mapState(['sum','school','subject']),
}

配置完毕之后，当组件访问state中的数据，可以由原来的$store.state.sum等价为sum，其他数据以此类推

mapGetters方法的使用

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

配置完毕后，当组件访问getters中的数据，可以由$store.getters.bigSum替换为bigSum

mapActions方法的使用

帮助我们生成与actions对话的方法，即包含$store.dispatch(xxx)的函数
注意：需要传递参数时，需要在组件进行方法调用时传参，例如按钮点击事件:
<button @click="incrementOdd(value)"></button>

methods:{
	//用于取代 $store.dispatch('incrementOdd'),对象写法
	...mapActions({
		incrementOdd : 'incrementOdd',
		incrementWait : 'incrementWait'
	}),
	//数组写法
	...mapActions(['incrementOdd','incrementWait'])
}

mapMutations方法的使用

帮助我们生成与mutations对话的方法，即包含$store.commit(xxx)的函数
注意：需要传递参数时，需要在组件进行方法调用时传参，例如按钮点击事件:
<button @click="increment(value)"></button>

methods:{
	...mapMutations({
		increment:'ADD',
		decrement:'DECREMENT'
	})
}