28Vue入门教程Vuex简介安装

　　1。学习目标
　　本小节我们会介绍数据管理工具vuex。包括什么是Vuex、Vuex的安装、以及如何创建和使用Vuex数据仓库。2。什么是Vuex
　　Vuex是一个专为Vue。js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。2。1什么是状态管理模式
　　让我们从一个简单的Vue计数应用开始：
　　实例演示！DOCTYPEhtmlhtmllangenheadmetacharsetUTF8metanameviewportcontentwidthdevicewidth，initialscale1。0metahttpequivXUACompatiblecontentieedgetitleDocumenttitleheadbody｛｛count｝｝buttonclickincrease添加一次buttonbuttonclickdecrease减少一次buttonbodyhtml
　　运行案例可查看在线运行效果
　　这个状态自管理应用包含以下几个部分：state，驱动应用的数据源；view，以声明方式将state映射到视图；actions，响应在view上的用户输入导致的状态变化。
　　以下是一个表示单向数据流理念的简单示意：
　　但是，当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：多个视图依赖于同一状态。来自不同视图的行为需要变更同一状态。
　　对于问题一，传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。对于问题二，我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导致无法维护的代码。
　　因此，我们为什么不把组件的共享状态抽取出来，以一个全局单例模式管理呢？在这种模式下，我们的组件树构成了一个巨大的视图，不管在树的哪个位置，任何组件都能获取状态或者触发行为！
　　通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性，我们的代码将会变得更结构化且易维护。2。2什么时候使用Vuex
　　Vuex可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行衡量。
　　如果您不打算开发大型单页应用，使用Vuex可能是繁琐冗余的。确实是如此如果您的应用够简单，您最好不要使用Vuex。一个简单的store模式就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex将会成为自然而然的选择。3。安装Vuex3。1直接下载
　　我们可以在官网（vuex）上直接下载vuex。在Vue之后引入vuex会进行自动安装：3。2CDN引用3。3NPM或Yarnnpminstallvuexsaveyarnaddvuex
　　在一个模块化的打包系统中，您必须显式地通过Vue。use（）来安装Vuex：importVuefromvueimportVuexfromvuexVue。use（Vuex）
　　当使用全局script标签引用Vuex时，不需要以上安装过程。4。基本示例
　　每一个Vuex应用的核心就是store（仓库）。store基本上就是一个容器，它包含着你的应用中大部分的状态（state）。Vuex和单纯的全局对象有以下两点不同：Vuex的状态存储是响应式的。当Vue组件从store中读取状态的时候，若store中的状态发生变化，那么相应的组件也会相应地得到高效更新。你不能直接改变store中的状态。改变store中的状态的唯一途径就是显式地提交（commit）mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。最简单的store：
　　实例演示！DOCTYPEhtmlhtmllangenheadmetacharsetUTF8metanameviewportcontentwidthdevicewidth，initialscale1。0metahttpequivXUACompatiblecontentieedgetitleDocumenttitleheadbody｛｛count｝｝bodyhtml
　　运行案例可查看在线运行效果
　　代码解释在JS代码第48行，通过newVuex。Store（｛｝）创建数据仓库。在JS代码第12行，我们可以通过store。state。count访问仓库中定义的数据。5。小结
　　本节，我们带大家学习了vuex的基本概念。主要知识点有以下几点：Vuex是一个数据管理工具，我们可以通过它简化组件间的数据共享问题。Vuex的安装和使用方法。使用newVuex。Store（｛｝）创建数据仓库。