Vuex中的mapState、mapMutations、mapActions、mapGetters的简单理解

看到map 我们首先想到了映射

没错 这就是关于Vuex中的state、mutations、actions和getters的映射


以下为组件内

首先引入
因为是组件中在使用映射 所以从【组件】中导入

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

然后还是模块化写法

export default{
  data () {
  },
  computed: {
    ...mapState(['count']),//state只能写在计算属性computed中 这里可以在数组内写多个方法名
    ...mapGetters(['funcname'])//也是只能写在computed中,getters其实就是一个包装state的一个函数 
//他改变不了state里面的内容 但是会随着state改变而改变 有点类似于计算属性
//调用方法同样为两种 一种为this.$store.getters.名称  第二种为映射
  },
  methods: {
  ...mapMutations(['sub','add']),
//上一篇提到的触发actions的第二种方式 其实就是这个mapActions的映射方法
  ...mapActions(['subAsync']),//store中actions里面的方法
  handel1(){
      this.sub('自定义的可选参数')
//注意 这里通过映射的函数方法 可以不在此处定义 而直接应用在事件所触发的方法名里面  
//比如本来@click触发的handel1  现在可以直接@click sub('自定义的可选参数')     
     }
  }
}

而此时 在store内 这些个store的方法都是需要声明的


1111111111303.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。