vuex中的辅助方法（mapMutations/mapGetters/mapActions……）的记忆点

目录

无子路由store单独js文件情况

store数据编写

map辅助方法使用

 编写组件页面

效果预览

有子路由store单独js文件情况

store数据编写

引进vuex入口文件index.js内

map辅助方法使用

完成组件页面编辑

效果预览 

---

​​​​​​​

无子路由store单独js文件情况

store数据编写

首先在store文件夹下index.js里写入几个mutation等数据备用

export default createStore({
  state: {
	  count:0,
	  arr:[
		  {code:1,name:'1',status:true},
		  {code:2,name:'2',status:false},
		  {code:3,name:'3',status:true},
		  {code:4,name:'4',status:false},
		  {code:5,name:'5',status:true},
	  ],
	  flag:true
  },
  getters:{
	  double:state=>state.count*2,
	  half:state=>state.count/2,
	  select:state=>state.arr.filter(item=>item.status==state.flag),
	  len:(state,getters)=>getters.select.length
  },
  mutations: {
	  incrcount(state){
		  state.count++
	  },
	  subcount(state){
	  		 state.count--
	  },
	  dynincr(state,value){
		  state.count+=Number(value)
	  },
	  dynsub(state,value){
	  		  state.count-=Number(value)
	  },
	  change(state){
		  state.flag=!state.flag
	  },
  },
  actions: {
  },
  modules: {
  }
})

编写路由组件内容，mutations/getters等内容的获取方式各有不同

map辅助方法使用

首先引入辅助方法

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

 store里mutations的内容需要在methods里接收，有几种接收方法

methods:{
//以下两种为不使用辅助方法的基础写法
//写法： 本组件内使用的方法名(){this.$store.commmit("store里编写的方法名")
			incrcount(){
				this.$store.commit('incrcount')
			},
			subcount(){
				this.$store.commit('subcount')
			},

//以下为辅助方法
//写法1：...mapMutations(['本组件内方法名1'，'本组件内方法名2'])
//<注：需要本组件内方法名与store内方法名一致>
			...mapMutations([
				'dynincr',
				'change'
			]),
//写法2：...mapMutations({本组件内方法名:'store里编写的方法名'