《vue应用程序开发》Vuex.pptxVIP

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

8.1Vuex的概述安装和基本使用8.2Vuex的复杂使用

第1节Vuex的概述安装和基本使用01

1.1Vuex概述在开发应用程序时，通常会抽取出很多组件进行开发，而各个组件之间经常需要进行通信。前面我们介绍过使组件之间的通信方法，但随着应用不断的扩展、变化，通信变得越来越复杂，越来越难追踪错误。我们希望项目的各个组件和数据都易维护、可扩展和好调试。于是数据管理模式应运而生。Vuex是一个专门为Vue.js应用程序开发的状态管理模式。

1.1Vuex概述状态管理模式中，包括状态（state）、视图（View）和行为（actions）。state表示应用中的和状态相关的数据，View在视图中显示State表示的数据，actions表示在相应View上用户的操作，来改变state。这是MVVM模式下的视图和数据的相应模式。从图中可以看出这是一种单向的数据流，即View驱动Actions，Actions修改state，state被修改后View同时改变。

1.1Vuex概述上面所说的状态，就是数据中可以在多个组件间共享的部分，是一些具体的数据，比如登录信息、购物车信息，该信息会在多个组件中都被用到，多个组件中共同用到的信息应该是相同的，一旦改变，所有的组件中该信息都会变化。 Vuex可以有效的解决组件间的通信问题，它可以跟踪每一个状态的变化，对组件中的数据流进行单向的、可预期的管理。Vuex采用集中式存储管理应用程序中所有组件的状态，避免了组件之间的传参、嵌套传参等低效、不可扩展的信息共享方式。

1.2Vuex的安装1.在网页中通过script标签在网页中引入。scriptsrc=js/Vue.js/scriptscriptsrc=js/Vuex.js/script2.在Vue.js的脚手架中安装和使用Vuex安装vuex：npminstallvuex--save3.在Vue.js脚手架vue-cli3版本以后，可以在搭建项目时，直接选择安装Vuex（推荐）

1.3Vuex的基本使用1.在store目录下的index.js文件中：引入Vue和Vuex，创建Vuex实例，使用exportdefault将Vuex的信息通过Vuex.Store对象暴露出，便于其他组件使用Vuex。2.在mian.js引入vuex3.页面上使用vuex的值

1.3Vuex的基本使用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对象。

1.3Vuex的基本使用Vue组件（视图）通过dispatch的方式调用actions，一般actions中封装的是异步操作，常见的是对后台服务器的数据调用。actions中通过commit的方式调用mutations，只有在mutations中才能修改state。state修改之后会自动在视图或Vue组件中自动显示，Vuex的state可以在Vue的调试工具Devtools中查看、调试。它们之间的关系如下图所示。

第2节Vuex的复杂使用02

2.1Vuex的复杂使用mutationmutation就是store中的methods，它必须是同步函数。每个mutation都有一个字符串的事件类型(type)和一个回调函数(handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受state作为第一个参数，payload作为第二个参数（额外的参数）：使用commit调用mutation，语法示例：this.$mit(mutations名称,value)

2.1Vuex的复杂使用action和mutation相似，aciton可以修改Vuex的状态（state）。action可以包含异步操作。mutation中不能进行异步操作，只能执行同步操作。action中不能直接改变状态（state），修改状态需要在action内部执行提交（commit）操作，调用mutation。当执行异步操作时，比如读写本地存贮、发送AJAX