《vue应用程序开发》Vuex

《Vue应用程序开发》Vuex第8章：Vuex简单使用8.1Vuex的概述安装和基本使用8.2Vuex的复杂使用第1节Vuex的概述安装和基本使用011.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"></script><scriptsrc="js/Vuex.js"></script>2.在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的复杂使用022.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请求、延时执行等，需要使用action完成。通过dispatch方法调用action，语法示例：this.$store.dispatch('actions名称',value)2.1Vuex的复杂使用gettersgetters和Vue对象中的计算属性computed类似。在组件里，一般使用getters来获取state。getters的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。getters可以用于监听、state中的值的变化，返回计算后的结果getters是不一定会用到的，在有多个子组件的情况下,是使用getters的比较合适的场景。mapGetters是将store中的getter映射到局部计算属性。登录实例的getters的定义如下，allNum的含义为登录的总人数，包括未登录的游客和已登录的用户的综合，getters定义在index.js中。//

定义gettersconst

getters

=

{

allNum:(state)=>{

return

state.in+state.out

}}2.1Vuex的复杂使用mapState、mapMutations、mapActions和mapGetters如果程序中的state、mutations和actions的数量比较多，Vuex提供了一种简单的方式来来批量定义这些对象，通过mapState、mapMutations、mapActions和mapGetters来一次性的定义多个对象。该种方式没有提供额外的功能，只是在语法上简化了定义state、mutations、actions和getters的语法结构。2.1Vuex的复杂使用如果要在程序中使用mapState，需要在使用之前在代码中将其导入（import），代码参考如下。import{mapState}from'Vuex'经常使用扩展运算符来进行定义map