21第8章Vuex简单使用（1-3节）.pptxVIP

第8章 ：Vuex 《Vue应用程序开发》 01 02 03 0 05 目 录 CONTENTS 第8章 Vuex 在开发应用程序时，通常会抽取出很多组件进行开发，而各个组件之间经常需要进行通信。前面我们介绍过使组件之间的通信方法，但随着应用不断的扩展、变化，通信变得越来越复杂，越来越难追踪错误。我们希望项目的各个组件和数据都易维护、可扩展和好调试。于是数据管理模式应运而生。Vuex 是一个专门为Vue.js应用程序开发的状态管理模式。 8.1Vuex概述 状态管理模式中，包括状态（state）、视图（View）和行为（actions）。state表示应用中的和状态相关的数据，View在视图中显示State表示的数据，actions表示在相应View上用户的操作，来改变state。这是MVVM模式下的视图和数据的相应模式。从图中可以看出这是一种单向的数据流，即View驱动Actions，Actions修改state，state被修改后View同时改变。 8.1Vuex概述 上面所说的状态，就是数据中可以在多个组件间共享的部分，是一些具体的数据，比如登录信息、购物车信息，该信息会在多个组件中都被用到，多个组件中共同用到的信息应该是相同的，一旦改变，所有的组件中该信息都会变化。 Vuex可以有效的解决组件间的通信问题，它可以跟踪每一个状态的变化，对组件中的数据流进行单向的、可预期的管理。Vuex采用集中式存储管理应用程序中所有组件的状态，避免了组件之间的传参、嵌套传参等低效、不可扩展的信息共享方式。 8.2 Vuex的安装 1.在网页中通过script标签在网页中引入。 script src=js/Vue.js/script script src=js/Vuex.js/script 2.在Vue.js的脚手架中安装和使用Vuex（推荐） 安装vuex：npm install vuex --save 8.3Vuex的基本用法 1. 在store目录下的index.js文件中： 引入Vue和Vuex， 创建Vuex实例， 使用export default将Vuex的信息通过Vuex.Store对象暴露出，便于其他组件使用Vuex。 2.在mian.js 引入vuex 3.页面上使用vuex的值 8.3.1 Store概述 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.1 Store概述 Vue组件（视图）通过dispatch的方式调用actions，一般actions中封装的是异步操作，常见的是对后台服务器的数据调用。actions中通过commit的方式调用mutations，只有在mutations中才能修改state。state修改之后会自动在视图或Vue组件中自动显示，Vuex的state可以在Vue的调试工具Devtools中查看、调试。它们之间的关系如下图所示。 感谢 聆听 THANK YOU FOR LISTENING