vuex模块获取数据及方法

前言：为了减轻store的负担，产生模块（module），每个模块独立，可复用

一、模块必写

示例：namespaced:true

必写原因 为，当多模块整合时，actions和mutations会整合为数组，但是getters不会，它是唯一的，不会整合，所以为了getters正常使用的同时每个模块具有独立性和可复用，namespaced:true必须写

二、获取数据

1.正常获取模块数据

代码如下（示例）：

 this.$store.state.模块.num  //数据
    
 this.$store.dispatch('模块/方法')  //方法
  
 this.$store.getters['模块/sum']

这个方法可以获取到数据，但是看起来是不是比较麻烦，尤其是当这个数据没太多的逻辑处理，直接插入视图，代码看起来太多了，接下来给大家分享其他方法

2.辅助函数获取模块数据

      vuex中提供了四种辅助函数，mapState,mapActions,mapMutations,mapGetters,写的时候直接从vuex中提溜出来

示例：

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

使用方法：

计算属性：

...mapState('模块'，{n:"num"})  //第一种对象写法

...mapState('模块',["num"])     //第二种数组写法

方法中：

...mapMutations("模块"，["方法"])

2.createnamespacedhelpers获取模块数据（官网提供）

它也是vuex中的一部分，它是一个对象，对象包含四个辅助函数，如图所示：

 当我们知道它是什么之后，接下来就是使用

引入 

import {createNamespacedHelpers} from "vuex"

打印之后我们也知道createNamespacedHelpers它是一个对象，呢我们就可以通过解构赋值拿到那四个辅助函数 ，示例：

let {mapstate,mapGetters,mapMutations} = createNamespacedHelpers("模块")

这时使用就跟上面的辅助函数的方法大差不差

计算属性：

...mapState(["num"])