SpringBootVue（十三）VueX状态管理库

　　对于组件化开发来说，大型应用的状态往往跨越多个组件。在多层嵌套的父子组件之间传递状态十分麻烦，而Vue更是没有为兄弟组件提供直接共享数据的方法。
　　基于这个问题，许多框架提供了解决方案：使用全局的状态管理器，将所有分散的共享数据交由状态管理器保管，Vue也不例外。
　　VueX是专为Vue。js应用程序开发的状态管理库，采用集中式存储来管理应用的所有组件状态。
　　VueX用于管理分散在Vue各个组件中的数据。兄弟组件间的数据传递。
　　vuex有两个版本，分别vuex3对应vue2；vuex4对应vue3
　　两种版本安装方式：
　　vuex3安装：npminstallvuex3
　　vuex4安装：npminstallvuex
　　官方网站：https：v3。vuex。vuejs。orgzh
　　关于状态管理：
　　一般在复杂应用中才会用到VueX，并非必须的。
　　每一个VueX应用的核心都是一个store（仓库）全局对象，与普通的全局对象不同，基于Vue数据与视图绑定的特点，当store中的状态（数据）发生变化时，与之绑定的视图也会被重新渲染。
　　store中的状态不允许被直接修改，改变store中的状态的唯一途径就是显式提交（commit）mutation，这可以方便地跟踪每一个状态的变化。
　　在大型复杂应用中，如果无法有效跟踪到状态的变化，将会对理解和维护代码带来极大困扰
　　VueX中有5个重要概念：State、Getter、Mutation、Action、Module
　　下面进行演示
　　创建一个基于Vue2的新项目：具体创建方式详见笔记（九）
　　vuecreatevuexdemo
　　将刚刚创建的项目vuexdemo拖入VisualStudioCode中
　　vuex3安装：npminstallvuex3
　　在src目录下新建一个store文件夹，新建一个index。js文件，提供一个初始state对象和一些mutation，文件代码如下：importVuefromvueimportVuexfromvuexVue。use（Vuex）conststorenewVuex。Store（｛state：｛count：0｝，mutations：｛increment（state）｛state。count｝｝｝）
　　说明：建立了一个store（仓库），默认count初始值为：0；以后state是状态就是给各个组件调用的。
　　不能直接改state的状态，如需要修改要调用mutations方法（该方法是用于1操作）。
　　然后将store导出，这样就可以在main。js中使用了exportdefaultstore
　　现在希望在组件中调用count的值，具体操作如下：
　　1。由于我们是在main。js创建Vue的，因此在main。js中就可以导入刚刚创建的index。jsimportstorefrom。storeindex。js
　　由于是以index。js作为文件名，也可以简写省略importstorefrom。store
　　然后用Vuex提供的一个从根组件向所有子组件，以store选项的方式注入该store的机制：newVue（｛render：hh（App），store：store｝）。mount（app）做完这些就可以在任意组件中利用store对象去取值。2。新建一个Test。vue组件，代码如下：templatetemplate
　　在根组件App。vue中进行注册
　　在这个Test。vue中将count的值取出来。｛｛this。store。state。count｝｝
　　运行项目后，浏览器就可以显示出count的初始值：0。这个时候Test。vue组件就成功调用了全局状态值。
　　如何修改状态码？增加一个按钮，进行加1操作。buttonclickadd1button
　　定义add方法：methods：｛add（）｛this。store。commit（increment）｝｝
　　再次强调，我们通过提交mutation的方式，而非直接改变store。state。count，是因为我们想要更明确地追踪到状态的变化。
　　这里调用的是index。js中store里面的increment方法来进行修改操作，而不是用this。store。state。countthis。store。state。count1
　　在浏览器中点击1按钮就可以改变状态了
　　优化1：可以通过设置一个方法，然后就可以直接调用｛｛count｝｝computed：｛count（）｛returnthis。store。state。count｝｝，
　　优化2：mapState辅助函数生成计算属性
　　当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用mapState辅助函数帮助我们生成计算属性，让你少按几次键。
　　当映射的计算属性的名称与state的子节点名称相同时，我们也可以给mapState传一个字符串数组。在单独构建的版本中辅助函数为Vuex。mapStateimport｛mapState｝fromvuexcomputed：mapState（〔映射this。count为store。state。countcount〕）
　　Getter
　　有时候我们需要从store中的state中派生出一些状态，例如对state数据进行过滤并进行计数等处理。
　　下面进行演示，在state中再增加一个todos待办事项列表。其中，吃饭已经完成；睡觉尚未完成。todos：〔｛id：1，text：吃饭，done：true｝，｛id：2，text：。睡觉，done：false｝〕
　　假设要显示到Test。vue组件上，现将todos映射过来，然后就可以使用。
　　现在假设只是想显示已经完成的动作，该怎样操作？
　　这就需要对todos进行过滤。在index。js中增加一个getters方法（注意：两个方法之间要加逗号，）getters：｛doneTodos：state｛returnstate。todos。filter（todotodo。done）｝｝
　　然后就可以在Test。vue组件中使用mapGetters辅助函数来映射。
　　由于我们原来已经使用了mapState，现在又要同时用另外一个方法mapGetters就需要对代码进行一些修改：computed：｛。。。mapState（〔count，todos〕），。。。mapGetters（〔doneTodos〕）｝，
　　这时浏览器就过滤出done状态为true的数据
　　下面的Mutation、Action、Module后面的实例讲解中才能更好理解，在此仅作为了解。Mutation
　　更改Vuex的store中的状态的唯一方法是提交mutation。
　　组件中提交Mutation的方法，代码如下。不再此进行演示，有兴趣可以自己试一下。import｛mapMutations｝fromvuexexportdefault｛。。。methods：｛。。。mapMutations（〔increment，将this。increment（）映射为this。store。commit（increment）mapMutations也支持载荷：incrementBy将this。incrementBy（amount）映射为this。store。commit（incrementBy，amount）〕），。。。mapMutations（｛add：increment将this。add（）映射为this。store。commit（increment）｝）｝｝
　　Action
　　在mutation中处理混合异步调用时就要用到Action。（在Vuex中，mutation都是同步事务：）
　　先注册一个简单的action：conststorenewVuex。Store（｛state：｛count：0｝，mutations：｛increment（state）｛state。count｝｝，actions：｛increment（context）｛context。commit（increment）｝｝｝）
　　在组件中分发Action，与前面类似：methods中使用mapActionsimport｛mapActions｝fromvuexexportdefault｛。。。methods：｛。。。mapActions（〔increment，将this。increment（）映射为this。store。dispatch（increment）mapActions也支持载荷：incrementBy将this。incrementBy（amount）映射为this。store。dispatch（incrementBy，amount）〕），。。。mapActions（｛add：increment将this。add（）映射为this。store。dispatch（increment）｝）｝｝Modules
　　由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store对象就有可能变得相当臃肿。
　　为了解决以上问题，Vuex允许我们将store分割成模块（module）。每个模块拥有自己的state、mutation、action、getter、甚至是嵌套子模块从上至下进行同样方式的分割。constmoduleA｛state：（）（｛。。。｝），mutations：｛。。。｝，actions：｛。。。｝，getters：｛。。。｝｝constmoduleB｛state：（）（｛。。。｝），mutations：｛。。。｝，actions：｛。。。｝｝conststorenewVuex。Store（｛modules：｛a：moduleA，b：moduleB｝｝）store。state。amoduleA的状态store。state。bmoduleB的状态
　　最终所有模块都要和到一起。当我们创建Vuex。Store时，通过modules参数给模块起名字，比如：给moduleA取名为a。
　　需要访问的模块的时候就加上a。store。state。amoduleA的状态。
　　其实就是对模块进行分割管理，比如：用户模块的状态，订单模块的状态等分别设置。
　　上述仅为Vuex的基本概念，具体使用到后面的综合案例再具体演示。