《vue教程课件》-《vue教程课件》-vuex状态管理

Vuex状态管理Vuex是一个专为Vue.js应用程序开发地状态管理模式。它可以集中管理所有组件的状态，一般应用在中大型单页应用中，可以粗略地理解为一个“非凡的全局对象”，用来解决不同组件之间的数据共享和数据持久化及响应式。学习目标：了解状态管理模式掌握vuex的基本使用掌握vuex选项配置8.1Vuex概述Vuex是vue团队专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。可以简要的理解，vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享。8.1.1状态管理模式从软件设计的角度，就是以一种统一的约定和准则，对全局共享状态数据进行管理和操作的设计理念。你必须按照这种设计理念和架构来对你项目里共享状态数据进行CRUD。所以所谓的“状态管理模式”就是一种软件设计的一种架构模式。 Vue为了增强组件之间的独立性，采用单向数据流状态管理，如图8-1所示。图8-1单向数据流关系图中，sate是驱动应用的数据源;view是将state映射到视图；actions是在view上的输入导致的状态变化。例1：单向数据流示例<template><divid="demo"><!--view--><p>{{count}}</p><button@click="decrement">--</button><button@click="increment">++</button></div></template><script>exportdefault{name:"demo1",//statedata(){return{count:0,};},//actionsmethods:{increment(){this.count++;},decrement(){this.count--;},},};</script>程序运行效果如图8-2所示。图8-2单向数据流示例8.1.2Vuex数据状态管理每一个Vuex应用的核心是store（仓库）,用它来定义应用中的数据及数据处理工具，由于vuex的状态存储是响应式的，当store中数据状态发生变化，页面中的store数据也发生相应的变化。在这模式下，任何组件都能获取状态或触发行为，这就是所谓的vuex数据状态管理，工作流程关系如图8-3所示。图8-3Vuex工作流程关系在vuex中，state用来维护所有应用层的状态，并确保应用只有一个数据源；vuecomponents用来定义组件；actions中定义事件回调方法，通过dispatch触发事件处理方法，例如，store.dispatch(事件处理方法),是异步处理。Mutations通过Commit提交，例如，mit(事件处理方法），是同步处理，在提交Mutations时，Devtools调试工具完成Mutations状态变化的跟踪。例2：vuex数据状态管理示例store目录下的index.js文件中编码代码如下：import{createStore}from'vuex'exportdefaultcreateStore({state:{count:0},mutations:{increment(state){state.count++},decrement(state){state.count--}},actions:{add(context){mit('increment')},sub(context){mit('decrement')}},modules:{}})

Demo2组件中代码如下：<template><divid="demo2"><p>{{$store.state.count}}</p><button@click="subCalc">--</button><button@click="addCalc">++</button></div></template><script>exportdefault{name:"demo2",methods:{subCalc(){this.$store.dispatch("sub");},addCalc(){this.$store.dispatch("add");},},};</script>About.vue组件中代码如下：<template><divclass="about"><h1>Thisisanaboutpage</h1><p>{{$store.state.count}}</p></div></template>程序运行效果如图8-4所示。图8-4vuex数据状态管理示例8.1.3Vuex基本使用vuex通常使用在中大型项目中，因此采用npm方式安装。npminstallvuex--save安装完成后，通常在项目的main.js文件增加如下代码：Importstorefrom'./store'//导入storecreateApp(App).use(store)在项目中生成store目录及目录下的index.js文件。文件内容如下：import{createStore}from'vuex'//导入store对象exportdefaultcreateStore({state:{},mutations:{},actions:{},modules:{}})8.2vuex中配置选项vuex中提供5个重要的选项：State、Getters、Mutation、Actions和Module。其中State存储项目中需要多组件共享的数据或状态；Getter从state派生出状态，类似于Vue实例中的computed选项；Mutation存储更改state状态的方法，是vuex中唯一修改state的方式，不支持异步操作，类似于Vue实例中的methods选项；actions可以通过提交mutations中的方法来改变状态，支持异步操作；modules是store的子模块，内容相当于store的一个实例。8.2.1stateState是提供唯一的公共数据源，所有共享的数据都要统一放到store的state中进行存储。State:{bookInfo:{bookName:“vue从入门到实践”，price:68,num:100}}在组件中获取数据的方法有：直接读取、使用计算属性和使用mapState辅助函数获取。例3：state示例<template><divid="state"><p>直接获取：{{this.$store.state.bookInfo.bookName}}</p><p>计算属性获取：{{bookName}}</p><p>使用mapState辅助函数:{{bookInfo.bookName}}</p></div></template><script>import{mapState}from"vuex";exportdefault{name:"state",computed:{bookName(){returnthis.$store.state.bookInfo.bookName;},...mapState(["bookInfo"]),},};</script>8.2.2gettersgetters相当于vue中的computed计算属性,getter的返回值会根据它的依赖被缓存起来，当它的依赖值发生改变会自动重新计算，getter会接收state作为第一个参数。例4：getters示例store目录中index.js文件中定义如下代码：getters:{total(state){returnstate.bookInfo.price*state.bookInfo.num}},在getters组件中，通过以下代码获取数据。<template><divid="getter"><p>getters：{{this.$store.getters.total}}</p><p>computed:{{totalCom}}</p><p>mapGetters:{{totalMap}}</p></div></template><script>import{mapGetters}from"vuex";exportdefault{name:"getter",computed:{...mapGetters({totalCom:"total",}),},};</script>程序运行效果如图8-5所示。图8-5getters示例8.2.3mutationsMutations是vuex中唯一修改store状态的方法，每个mutation都有一个字符串一只事件类型和一个回调函数，通过回调函数可以实现状态更改，state作为第一个参数。在mutations中定义需要更改state状态的函数，然后在组件中应用commit方法提交对应的mutations函数，实现state状态更新。例5：mutatinos示例在store目录中的index.js文件中定义如下代码：mutations:{addMut(state,n){state.count+=n},subMut(state,n){state.count-=n}}在mutations组件中，定义如下代码：<template><divid="mutations"><p>{{this.$store.state.count}}</p><button@click="subFun(5)">-5</button><button@click="addFun(5)">+5</button></div></template><script>import{mapMutations}from"vuex";exportdefault{name:"mutations",methods:{addFun(n){this.$mit("addMut",n);},//...mapMutations({//subFun:"subMut",//subFun映射this.$mit('subMut')//}),...mapMutations(['subMut']),subFun(n){this.subMut(n)}};</script>程序运行效果如图8-6所示。图8-6mutations示例8.2.4actionsactions与mutations功能类似，不同之处在于：actions用于处理异步任务，如果通过异步操作变更数据，必须通过actions，而不能直接使用mutations，需要通过触发mutations的方式间接变更数据。例6：actions示例在store目录中的index.js文件中定义如下代码：actions:{add(context){mit('increment')},sub(context){mit('decrement')},addAct(context,payload){setTimeout(function(){mit('addMut',payload)},2000)},subAct(context,payload){mit('subMut',payload)}}在actions组件中文件中定义如下代码：<template><divid="actions"><p>{{$store.state.count}}</p><!--<button@click="subFun">--10</button><button@click="addFun">++10</button>--><button@click="subFun(10)">--n</button><button@click="addFun(10)">++n</button></div></template><script>import{mapActions}from'vuex';exportdefault{name:"actions",methods:{addFun(){this.$store.dispatch("addAct",10);},//subFun(){//this.$store.dispatch("subAct",10);//},...mapActions({//addFun:"addAct",使用mapActions将actions函数映射为当前组件的methods方法subFun:"subAct",}),},};</script>程序运行效果图8-7左（右）所示。图8-7actions示例8.2.5modules在项目开发中，当页面组件存在多种状态，使用单一状态树管理变得复杂多变。Vuex提出了modules(模块化)，每个模块拥有state、getters、muationst和actions,模块之中可以嵌套模块，每一级都有着相同的结构。例7：modules示例在store目录中insex.js文件定义如下代码：constmodulesA={state:()=>({name:"A-Tom",age:18}),getters:{},muations:{},actions:{}}constmodulesB={state:()=>({name:"B-Jack",age:20})}...modules:{modulesA,modulesB}在modules组件文件中定义如下代码：<template><divid="modules"><p>{{this.$store.state.modulesA.name}}</p><p>{{this.$store.state.modulesB.age}}</p><p>{{this.$store.state.modulesB.name}}</p><p>{{