MySQL_窗口函数_介绍

剑指58翻转单词顺序,整数反转

  返回  

vuex(三)之辅助函数

2021/8/21 18:08:00 浏览:

一、mapState

当一个组件需要获取多个状态的时候,通过this.$store.state来声明就会显得有些重复跟冗余,通过mapState这个辅助函数可以帮助生成计算属性。
在store文件中定义state

//  store.js存放数据
state:{
	number1:1,
	number2:2
}

如何使用

//方式一(不推荐)
<template>
	{{$store.state.number1}}
	{{$store.state.number2}}
</template>
//方式二(计算属性)
<template>
	{{number1}}{{number2}}
</template>
computed:{
    number1(){
      return this.$store.state.number1
    },
    number2(){
      return this.$store.state.number2
    }
}
//方式三(辅助函数)
//在组件中使用mapState,放置在computed里面。
//项目中常用的方式
// App.vue
<template>
  <div>
    <h1>{{number1}}</h1>
    <h1>{{number2}}</h1>
  </div>
</template>
import { mapState } from 'vuex'
export default{
	computed:{
		...mapState(['number1','number2']) // 在组件通过this就可调用,不用再写this.$store.state
		// ...mapState({ 另一种写法
    	//   number1: state=>state.number1,
    	//   number2: state=>state.number2
    	// }),
	}
}

二、mapGetters

//方式一(不推荐)
<template>
	{{$store.getters.GET_BOOK_NUM}}
</template>
//方式二(计算属性)
<template>
	{{GET_BOOK_NUM}}
</template>
computed:{
    GET_BOOK_NUM(){
      return this.$store.getters.GET_BOOK_NUM
    }
}
//方式三(辅助函数)
//项目中常用的方式
<template>
	{{GET_BOOK_NUM}}
</template>
import {mapGetters} from 'vuex'
computed:{  
      ...mapGetters(['GET_BOOK_NUM'])  
}

三、mapMutations

mapMutations 其实跟mapState、mapGetters 的作用是类似的,将组件中的 methods 映射为store.commit 调用。

在store文件中定义mutations

//  store.js
  mutations:{
    changeNumber1(state, val){
      state.number1 += val
    },
    changeNumber2(state, val){
      state.number2 += val
    },
  },

每一个mutation接受两个参数,一个是state,一个是传入值;

在组件中使用mapMutations,放置在methods里面。

// App.vue
<template>
  <div>
    <h1>{{number1}}</h1>
    <h2 @click="changeNumber1">+{{number1}}</h2>
    <h1>{{number2}}</h1>
    <h2 @click="changeNumber2">+{{number2}}</h2>
  </div>
</template>
import { mapMutations } from 'vuex'
export default{
  computed:{
		...mapState(['number1','number2']) 
  }
  methods:{
    ...mapMutations(['changeNumber1','changeNumber2']),
  }
  //映射 this.changeNumber1() 为 this.$store.commit('changeNumber1')
  //映射 this.changeNumber2() 为 this.$store.commit('changeNumber2')
}

四、mapActions

mapActions将组件中的 methods 映射为store.dispatch 调用。

在store文件中定义actions

//  store.js
  mutations:{
    changeNumber1(state, val){
      state.number1 += val
    },
    changeNumber2(state, val){
      state.number2 += val
    },
  },
  actions:{
	changeNumber1Action(context,val){
	  context.commit('changeNumber1',val);
	},
	changeNumber2Action(context,val){
	  context.commit('changeNumber2',val);
	}
  }

每一个action接受两个参数,一个是context(上下文),一个是传入值;

在组件中使用mapActions,放置在methods里面。

// App.vue
<template>
  <div>
    <h1>{{number1}}</h1>
    <h2 @click="changeNumber1Action">+{{number1}}</h2>
    <h1>{{number2}}</h1>
    <h2 @click="changeNumber2Action">+{{number2}}</h2>
  </div>
</template>
import { mapActions} from 'vuex'
export default{
  methods: {
    ...mapActions([
      'changeNumber1Action','changeNumber2Action'
    ]),
     //映射 this.changeNumber1Action() 为 this.$store.dispatch('changeNumber1Action')
     //映射 this.changeNumber2Action() 为 this.$store.dispatch('changeNumber2Action')
  }

联系我们

如果您对我们的服务有兴趣,请及时和我们联系!

服务热线:18288888888
座机:18288888888
传真:
邮箱:888888@qq.com
地址:郑州市文化路红专路93号