vuex的初次使用--笔记2

1：安装

答：如果你通过vue_cli脚手架工具创建项目的化，一般都会选择安装了vuex。如果没有安装的过的话，可以使用在自己的项目的根目录中使用如下的命令进行安装 ，另外可以通过@指定版本号

2：使用

答：通过如下代码，即可将vuex和vue结合起来。这样以后使用new vue生成的vue实例中就可以接纳vuex的实例了，要问问什么，问就是，Vuex 通过 store 选项，提供了一种机制将状态从根组件“注入”到每一个子组件中，避免在需要使用 state 的组件中需要频繁地导入。另外vuex是vue的插件，必须通过use才能在vue中使用vuex。

3:创建vuex实例

答：vue接纳的是vuex的实例，因此需要先实例化vuex。如下图，vuex包含的几个属性。

state区域：是用来存放元素的地方。

getters区域：是用来加工state元素成新元素的地方，类似计算属性。支持返回计算值[结果根据依赖缓存]或计算函数[可带参数，不缓存结果]。第一个参数是state[可选]，第二个参数getters[可选]。

mutations区域：是用来更改并记录元素的地方，类似事件[时间名+方法体]。接受一个state参数，允许使用第二个参数增加传参[类型也可以为对象，以便传入多个参数]，并且只能通过store实例的commit()方法进行对应触发，此外，commit()支持对象参数。支持ES6的动态计算属性名语法，[变量或常量]来动态计算出属性名。mutation必须是同步函数，因为在异步回调函数中进行的状态的改变都是不可追踪的，devtool只能捕捉触发时刻前后的状态。

actions区域：是用来加工mutations的地方，即通过[调用dispatch方法，内部commit来]触发mutations。action允许使用异步方法，但每一步都要以mutation来记录状态，不可直接更改状态。并且action接受一个类似store实例的一个context对象，来使用类似store中的方法，还允许额外传参和对context参数解析。允许通过promise和async/await来组合使用action，一个store.dispatch在不同模块中可以触发多个 action 函数。在这种情况下，只有当所有触发函数完成后，返回的 Promise 才会执行。

注意：组件使用vuex中的元素，大都通过计算属性来访问。

mapState辅助函数是用来将store中的state映射到局部的计算属性[computed]中去的。支持使用对象参数[只支持函数]或数组参数。

mapGetters辅助函数是用来将store中的getter映射到局部的计算属性[computed]中去的。支持使用对象参数[只需要映射getter名即可]或者数组参数。

mapMutations辅助函数是用来将store中的mutation映射到局部的方法[methods]中。支持对象参数[只需要映射mutation名]或者数组参数。

mapActions辅助函数是用来将store中的action映射到局部的方法[method]中。支持对象参数[只需要映射action名]或者数组参数。

modules区域：是静态注册vuex模块的地方。每个选项都是一个模块，都是一个小store，可以包含state、getters、mutations、actions、modules。默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的。其中state和vue实例中的data类似，建议使用函数返回数据对象，否则将会共享同一数据对象。在模块中state只能访问局部状态，getters、mutations、actions都有可用参数访问到全局状态。另外，模块支持使用命名空间，开启后，子模块访问本命名空间元素，无需变动，dispatch和commit触发全局元素时，需要使用{root:true}选项参数，而使用rootState和rootGetters来访问全局state和getters。可以在命名空间模块中注册全局action[需使用对象式注册]。支持mapSate、mapActions、mapMutations、mapGetters映射到带命名空间的模块中，并且支持多种简化方式。支持动态注册，动态删除，检测模块。registerModule、unregisterModule、hasModule。支持注册新模块时保留之前state状态，防止覆盖重写，开启preserveState选项即可。