Vuex中State、Getter、Mutation、Action、Module作用和用法

Vuex store的基本代码结构如下：

一、State

state是单一状态树，里面集中存储所有的数据，简单地说，也就是vuex用来存储数据状态的地方。用法也非常简单，将需要保存的数据添加在里面，然后外界可通过$store.state.[data]访问即可，当然也可以用vuex提供的mapState去简化，需要注意的是，需在computed中调用mapState方法拿到vuex state中的数据。具体如下：

这里一共展示了三种拿到state数据的用法，第一种就是通过vue实例对象上的$store直接去取；第二和第三种都是通过mapState去取，只是传参不同，如果传递数组，那么会将vuex state中的相对应的数据映射到computed中；如果传入对象的话，可以将对象的key作为computed中的key，并将获取到的数据赋值到对应的key上，也就是可以改变数据参数名。最后的结果都能拿到数据，如下：

二、Getter

getters就类似与组建中的计算属性，可以对state中的数据作简单的处理再展示。同样获取的方法与state几乎完全相同，如下：

输出结果：

三、Mutation

mutation 主要是用来修改vuex中的状态数据。它可以提供方法去修改状态数据。用法也非常简单，首先在mutations内部定义好修改数据的方法，方法中可传入payLoad，也就是传入数据供方法使用，然后可以在组件中通过$store.commit进行调用，另外也可通过vuex提供的mapMutations调用，方式与前面state和getter一致，但是需要将它注册到组件的methods中。如下：

注意：在mutations中尽量不要去使用异步操作，因为在开发过程中经常会使用到vue devtools中的调试功能，其中包括Time Travel（时光旅行）等功能，如果我们在mutations中使用异步操作的话就会造成功能不可用的情况，所以我们可以通过Action来实现异步操作。

四、Action

actions中可以定义事件方法，方法第一个参数是context上下文参数，这个对象中有我们需要的state、commit、getters等成员，组件中可通过$store.dispatch去调用actions中定义的方法，当然也可通过mapAction去调用，方式与上一致，在actions定义的方法中可调用mutations中的方法去改变vuex 的状态数据，也就是可以在actions中去实现异步操作改变state中的数据。如下：

五、Module

module就是可以将vuex 进行模块化操作，可通过不同模块导入vuex对象，达到分离管理的效果。如下：

首先需要导入cat模块，其中cat导出的数据结构与vuex的基本结构几乎完全一致，namespaced表示是否启用命名空间，启用命名空间后我们可以通过mapState等操作更方便的调用模块中的数据。如下：