19第8章Vuex简单使用（1-3节）

第8章：Vuex《Vue应用程序开发》

010203005Part18.1Vuex概述Part28.2Vuex的安装Part38.3Vuex的基本用法Part48.4Vuex的复杂用法目录CONTENTSPart58.5章节案例第8章VuexVuex是一个专为Vue.js应用程序开发的状态管理模式+库。它采用集中式存储管理应用中所有组件的共享状态，并通过一套严格的规则确保状态以可预测的方式发生变化。这种设计有助于提升代码的可维护性、可调试性和系统稳定性。8.1Vuex概述在Vuex的架构中，核心包含状态（State）、视图（View）和操作（Action）三大要素，三者共同构成单向数据流：状态表示驱动的数据源，用于存储所有组件共享的状态；视图以声明方式将状态映射为页面视图；操作响应在视图上的用户操作进而触发状态变更。整个数据流呈单向闭环：视图上的用户操作触发操作→操作按规则修改状态→状态变更后，依赖该状态的视图自动响应更新。8.1Vuex概述上面所说的状态，就是数据中可以在多个组件间共享的部分，是一些具体的数据，比如登录信息、购物车信息，该信息会在多个组件中都被用到，多个组件中共同用到的信息应该是相同的，一旦改变，所有的组件中该信息都会变化。Vuex可以有效的解决组件间的通信问题，它可以跟踪每一个状态的变化，对组件中的数据流进行单向的、可预期的管理。Vuex采用集中式存储管理应用程序中所有组件的状态，避免了组件之间的传参、嵌套传参等低效、不可扩展的信息共享方式。8.2Vuex的安装1.在网页中通过script标签在网页中引入。<scriptsrc="js/Vue.js"></script><scriptsrc="js/Vuex.js"></script>2.在Vue.js的脚手架中安装和使用Vuex（推荐）安装vuex：npmcreatevue@latest8.3Vuex的基本用法1.

在store目录下的index.js文件中：引入Vuex，创建Vuex实例，使用exportdefault将Vuex的信息通过Vuex.Store对象暴露出，便于其他组件使用Vuex。2.在mian.js引入vuex3.页面上使用vuex的值8.3.1Store概述Vuex应用的核心就是Store。Store中包含有各种Vuex的状态和操作状态的方法，主要包括state、mutation、getter和actions。和Vue对象做一个对比，Vuex中，state表示Vuex的状态，和Vue对象的数据data相仿，getter和Vue对象的计算属性computed相仿，mutation和Vue的方法method相仿，action是一种特殊的方法（method），用于处理异步等特殊情况，和封装或调用了已有方法的方法相仿。在Vue对象中定义了Vuex的Stroe对象之后，各个组件能通过

this.$store

访问到Vuex的Store对象。8.3.1Store概述Vue组件（视图）通过dispatch的方式调用actions，一般actions中封装的是异步操作，常见的是对后台服务器的数据调用。actions中通过commit的方式调用mutations，只有在mutations中才能修改state。state修改之后会自动在视图或Vue组件中自动显示，Vuex