vuex的gatter调用方式、moudules

特性：
1、getters对象内是多个函数比如叫做getter，每个函数需要有return返回结果；
2、每个getter函数可以接收state作为第一个参数，getters作为第二个参数；
3、因为有了第二个参数，所以可以通过第二个参数调用getters里的其他getter函数；

组件中的调用方式：

比如现有state和getters如下：

通过属性访问：

方式①：在组件直接使用

方式②：在组件computed中使用

通过方法访问：

方式①：在getter函数中返回一个函数，来实现给getter传参，在对store里的数组进行查询时非常有用。

注意，getter 在通过方法访问时，每次都会去进行调用，而不会缓存结果。

通过mapGetters辅助函数访问：

使用时要放到组件的计算属性中

 getters可以和mutations/actions/state这些store的选项配置放在一块；也可以在存在modules的情况下，单独将所有的getters放到一个js文件中。

 

Modules的使用：

通常情况下一个项目会存储很多状态。当vuex中一个js文件中存储了很多state状态（随之而来的是mutations/actions/getters等会显得非常的多），store对象就显得非常臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割，在在store的index中对moudles和getters进行统一导出。

默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的，这样使得多个模块能够对同一 mutation 或 action 作出响应。如果希望你的模块具有更高的封装度和复用性，此时就用到了命名空间这个概念。那么如何使模块成为一个命名空间模块？

可以在单个模块中通过添加namespaced: true的方式使其成为带命名空间的模块。如：status.js就是一个单独的store模块

。

组件中如何获取带有命名空间的state数据？

组件中直接使用时：

this.$store.state.status.xx

组件中通过mapState辅助函数方式使用：

...mapState({

count: state => state.status.xx

})

组件中如何调用命名空间模块中的getters？

this.$store.getters['status/getterOne']

或使用mapGetters:

...mapGetters('status',['getterOne']),此处的status，不是以前缀的形式出现！！！

使用别名状态下：

...mapGetters({

paramGetter:'status/getterOne'

})

组件中如何调用命名空间模块中的Mutations？

this.$store.commit('status/mutationOne');

或使用mapMutations

...mapMutations('status',['mutationOne'])

使用别名状态下：

...mapMutations({

changeNameMutation:'status/mutationOne'

})

组件中如何调用命名空间模块中的actions？（与mutations一致）

this.$store.dispatch('status/actionOne')

或使用mapActions

...mapActions('status',['actionOne'])

使用别名状态下：

...mapActions({

changeNameAction:'status/actionOne'

}）