状态管理VueX教学内容l第一节Vuex介绍l第二节Vuex安装与使用Vuex介绍n对于组件化开发来说，大型应用的状态往往跨越多个组件。在多层嵌套的父子组件之间传递状态已经十分麻烦，而Vue更是没有为兄弟组件提供直接共享数据的办法。n基于这个问题，许多框架提供了解决方案——使用全局的状态管理器，将所有分散的共享数据交由状态管理器保管，Vue也不例外。nVuex是一个专为Vue.js应用程序开发的状态管理库，采用集中式存储管理应用的所有组件的状态。n简单的说，Vuex用于管理分散在Vue各个组件中的数据。n安装：npminstallvuex@next状态管理n每一个Vuex应用的核心都是一个store，与普通的全局对象不同的是，基于Vue数据与视图绑定的特点，当store中的状态发生变化时，与之绑定的视图也会被重新渲染。nstore中的状态不允许被直接修改，改变store中的状态的唯一途径就是显式地提交（commit）mutation，这可以让我们方便地跟踪每一个状态的变化。n在大型复杂应用中，如果无法有效地跟踪到状态的变化，将会对理解和维护代码带来极大的困扰。nVuex中有5个重要的概念：State、Getter、Mutation、Action、Module。状态管理StatenState用于维护所有应用层的状态，并确保应用只有唯一的数据源Staten在组件中，可以直接使用this.$store.state.count访问数据，也可以先用mapState辅助函数将其映射下来GetternGetter维护由State派生的一些状态，这些状态随着State状态的变化而变化Gettern在组件中，可以直接使用this.$store.getters.doneTodos，也可以先用mapGetters辅助函数将其映射下来，代码如下：MutationnMutation提供修改State状态的方法。Mutationn在组件中，可以直接使用store.commit来提交mutationn也可以先用mapMutation辅助函数将其映射下来ActionnAction类似Mutation，不同在于:nAction不能直接修改状态，只能通过提交mutation来修改，Action可以包含异步操作Actionn在组件中，可以直接使用this.$store.dispatch('xxx')分发action，或者使用mapActions辅助函数先将其映射下来Modulen由于使用单一状态树，当项目的状态非常多时，store对象就会变得十分臃肿。因此，Vuex允许我们将store分割成模块（Module）n每个模块拥有独立的State、Getter、Mutation和Action，模块之中还可以嵌套模块，每一级都有着相同的结构。Module总结n作为一个状态管理器，首先要有保管状态的容器——State；n为了满足衍生数据和数据链的需求，从而有了Getter；n为了可以“显式地...
