vuex作用

概述

众所周知vuex有5个核心概念：state、getters、mutations、actions、modules。这五个核心概念大致的用途如下：

• state：用于存储数据
• getters：用于获得需要计算state后得出的值，比较简单的数据转换。
• mutations：更改自身state的值
• actions：通过调用mutations修改state值
• modules：类似包的概念，封装各个state，避免冲突
  这是比较简单的理解，如果把其和分层的思想结合起来，感觉还是比较有意思的，接下来会通过五大核心概念的细微差别，来定义一下如何正确使用vuex，日后才能方便维护。

关于mutations

mutations只能对包内state操作，不能引入根目录，修改全局包。

在使用mutations时，会发现mutations里的方法只能引用两个参数state和payload，而不像actions那样可以引用context的参数，从中获得dispatch，commit，getters，rootGetters等。这个特性在加上modules中的namespaced为true时，你将无法引用rootState的值。

mutations中的方法不可以传递返回值

mutations中的方法不能返回返回值，也就是说commit方法不支持返回值的操作。

结论

mutations的方法职责单一，只用来修改所属包内的state属性。

关于actions

可以访问全局，局部所有参数

通过context传递的参数可以获得所有全局变量的属性。接收外部的参数

actions可以通过Promise调用链来持续传参

这个可以解决各个actions相互调用

结论

actions可以作为封装层上面调用所有mutations的方法

关于getters

getters接收的参数

getters可以接收state，getters，rootState，rootGetters

getters可以传递参数

getters可以通过返回函数，来传递参数

总结

getters只是简单获得属性的方法。建议根据全局参数获得指定的包内参数。

设计思想

以上三个核心概念结合modules的特性，感觉可以加上一个分层的思想。

• mutations只负责包内修改
• 包内actions负责包内的服务，用于多包mutations的封装调用
• 总actions，用于modules全局的调用