看到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