vuex的四个辅助函数的使用方法

目录

1.首先来说使用的步骤以mapState为例：

2. 在全局使用mapGetters

3.在全局使用mapMutations

4.在全局使用mapActions

---

有两个是写computed里面------1.mapGetters   2.mapState
还有两个是写methods里面的----1.mapActions  2.mapMutations

vuex的四个辅助函数      mapState,mapActions,mapMutations,mapGetters

1.首先来说使用的步骤以mapState为例：

     这步骤其实都类似
1.1要使用es6的写法按需引入import { mapState } from 'vuex' 

1.2然后在computed里面写  使用展开运算符，mapState 它是一个函数   使用的方法是
1.3  ...mapState(['xxx'])，-----这个xxx里面写的是你要用的数据---数组包着
 1.4 ...mapState({'新名字': 'xxx'}) -----这里面的新名字是你要重新定义名字---对象包着

1.5在js里面写的话是this.xxx  -----这里面的xxx也就是你拿的值
   在组件里面写的话直接{{xxx}}----插值表达式一样，组件里面不加this

2.还有就是在module里面使用辅助函数如下
  2.1在computed里面写
      ...mapState('模块名', ['xxx']), 
      ..mapState('模块名', {'新名字': 'xxx'})

2. 在全局使用mapGetters

computed: { 
  ...mapGetters(['xxx']), 
  ...mapGetters({'新名字': 'xxx'})
}

在modules中使用getters

computed: { 
  ...mapGetters('模块名', ['xxx']), 
  ...mapGetters('模块名',{'新名字': 'xxx'})
}

3.在全局使用mapMutations

methods: { 
  ...mapMutations(['mutation名']), 
  ...mapMutations({'新名字': 'mutation名'})
}

在modules中使用mapMutations
methods: { 
  ...mapMutations('模块名', ['xxx']), 
  ...mapMutations('模块名',{'新名字': 'xxx'})
}

4.在全局使用mapActions

methods: { 
  ...mapActions(['actions名']), 
  ...mapActions({'新名字': 'actions名'})
}

在modules中使用mapActions

methods: { 
  ...mapActions('模块名', ['xxx']), 
  ...mapActions('模块名',{'新名字': 'xxx'})
}

-----
有两个是写computed里面------1.mapGetters   2.mapState
还有两个是写methods里面的----1.mapActions  2.mapMutations,

                                                                                                --------------------