全局状态管理模式vuex

vuex主要包含的对象

state:存放共享状态。

mutations:操作state成员的方法集，只能是同步操作。

getters：加工state成员供外界使用。

actions：提交mutation，可以是异步操作。

modules：将store模块化，各module有自己的state，getters，mutations，actions，modules。

npm安装vuex：npm install vuex@next --save

state的访问

当需要在组件中使用公共状态时，通过"store.state.状态名称"进行获取。其中的一种方法是在计算属性中返回这个状态。（选项式API）例

（组合式API）

getters的使用方法

如果有一些属性是通过公共状态计算得出的，并且在全局范围内需要共享，那么使用vuex的getters来定义这个派生状态是一个好方法。

mutations的使用方法

mutations类似于事件：每个mutaion都有一个字符串的事件类型（type)和一个回调函数（handler),这个回调函数负责进行状态的更改，它会接收两个默认的形参（[state],[payload]).state是当前vuex对象中的state，payload是该方法在被调用时传递的额外参数。

定义一个类型为increment的mutation方法使一个计数count自增10

提交mutaions

通过store.commit方法触发一个类型为increment的mutation，同时传递一个mutation类型和一个额外的参数

actions的使用方法

actions定义了一系列操作，类似于mutations，不同的是actions可以是异步的，可以通过actions来改变store中的state，但是为了让状态的改变可以追溯来源，即使在action中也不能直接修改state中的状态，而是通过提交mutations的方式来改变。

注册actions，调用context.commit提交一个mutation，或者通过context.state和context.getters来获取state和getters

例子场景：一个计数值需要在前置条件满足的情况下才能增加一个数。

vuex提供的四大辅助函数（mapState,   mapGetters,  mapMutations,  mapActions )