《Vue 3基础入门》课件 第十章 Vuex

Vuex详解Contents目录Vuex状态获取方法04Vuex状态同步更改方法05Vuex状态异步更改方法06Vuex是什么01vuex安装02Vuex状态管理03Vuex状态模块化管理0701Vuex是什么PARTVuex是什么01Vuex是为了Vue3应用程序开发而设计的状态管理模式。它采用集中式存储管理应用程序中的所有组件状态，并且使用相应的规则来确保状态以一种可预测的方式发生变化。此外，Vuex还集成在Vue3的官方调试工具devtoolsextension中，提供一些高级调试功能，如零配置的时间旅行调试、状态快照导入导出等。02vuex安装PARTvuex安装0102使用npm安装。执行以下命令安装Vuex：npminstallvuex@next–save或者使用yarn安装，执行下面的命令安装Vuex：yarnaddvuex@next–save注意安装Vuex时,需要安装支持Vue3新版本的Vuex,即这里的vuex@next.支持Vue2.x的Vuex版本名是Vuex。如果需要使用dev分支下的最新版本，可以在GitHub上克隆代码并自己构建：gitclone/vuejs/vuex.gitnode_modules/vuexcdnode_modules/vuexyarnyarnbuild03Vuex状态管理PART每一个Vuex应用的核心就是store（仓库），“store”可以看作一个容器，包含着应用中大部分的状态(state)，Vuex和单纯的全局对象有以下不同点：（1）Vuex的状态存储是响应式的。当Vue3组件从store中读取状态的时候，若store中的状态发生变化，那么相应的组件也会得到高效更新。（2）不能直接改变store中的状态。改变store中状态的唯一途径就是显式地提交(commit)mutation。这样Vuex可以方便跟踪每一个状态的变化，从而让Vuex能够实现一些工具帮助管理应用。0102组件中获取Vuex状态Vuex中的状态是响应式的，因此从store实例中读取状态的方法是在计算属性中返回相应状态，代码如下：//创建一个Counter组件constCounter={template:'<div>{{count}}</div>',computed:{count(){returnstore.state.count}}}每当store.state.count发生变化时，计算属性会重新计算并触发与其相关的DOM对象更新。然而这种模式会使组件依赖全局状态单例，导致在模块化构建系统中，每个需要使用状态的组件都需要频繁导入，并且在测试组件时需要模拟状态。Vuex状态管理0304对象展开运算符mapstate()函数返回一个对象，通常情况下需要一个工具函数将多个对象合并成一个对象，并传递给计算属性，对象展开运算符可以极大地简化这个过程。代码如下：computed:{localComputed(){/*...*/},//使用对象展开运算符将此对象混入到外部对象中...mapstate({//...})}辅助函数mapstate()当一个组件需要获取多个状态时，每个状态都声明为计算属性则会冗余且重复。使用mapstate()辅助函数帮助生成计算属性，可以解决这个问题，代码如下：import{mapstate}from'vuex'exportdefault{//...computed:mapstate({count:state=>state.count,//传字符串参数'count'等同于'state=>state.count'countAlias:'count',//为了能够使用'this'获取局部状态，必须使用常规函数countPlusLocalstate(state){returnstate.count+this.localCount}})}Vuex状态管理04Vuex状态获取方法PART获取状态有时候需要从store的state中衍生出一些状态，例如对列表进行过滤并计数，代码如下：computed:{doneTodosCount(){returnthis.$store.state.todos.filter(todo=>todo.done).length}}为了简化上述代码，Vuex允许在store中定义getters内的函数，简称为getter函数，getter函数接受state作为它的第一个参数，代码如下：conststore=createStore({state:{todos:[{id:1,text:'...',done:true},{id:2,text:'...',done:false}]},getters:{//定义getter函数doneTodos(state){returnstate.todos.filter(todo=>todo.done)}}})Vuex状态获取方法04辅助函数mapGetters()mapGetters辅助函数仅仅是将store中的getter函数映射到局部计算属性，代码如下：import{mapGetters}from'vuex'exportdefault{//...computed:{//使用对象展开运算符将getter函数混入computed对象中...mapGetters(['doneTodosCount','anotherGetter',//...])}}也可以将getter函数重新命名，代码如下：...mapGetters({//把'this.doneCount'映射为'this.$store.getters.doneTodosCount'doneCount:'doneTodosCount'})Vuex状态获取方法05Vuex状态同步更改方法PART通过提交mutation更改Vuex状态在Vuex的store中，更改状态的唯一方法是提交mutation。mutation类似于事件，定义在mutations内部，每个mutation包含一个字符串类型(type)和一个回调函数(handler)。回调函数的功能是实际进行状态更改，并且第一个参数是state，mutation处理函数不能被直接调用，而是需要以相应的type调用mit()函数，代码如下：Vuex状态同步更改方法conststore=createStore({state:{count:1},mutations:{increment(state){//变更状态state.count++}}})mit('increment')对象风格提交方式提交mutation的另一种方式是直接使用包含type属性的对象。当使用对象风格的提交方式，整个对象都作为载荷传给mutation函数，因此处理函数保持不变，代码如下：mit({type:'increment',amount:10})mutations:{increment(state,payload){state.count+=payload.amount}}Vuex状态同步更改方法06Vuex状态异步更改方法PARTVuex状态异步更改方法import{mapActions}from'vuex'exportdefault{methods:{...mapActions(['increment',//将'this.increment()'映射为'this.$store.dispatch('increment')'//'mapActions'也支持载荷：'incrementBy'//将'this.incrementBy(amount)'映射为'this.$store.dispatch('incrementBy',amount)']),...mapActions({add:'increment'//将'this.add()'映射为'this.$store.dispatch('increment')'})}}在组件中分发action：分发actionaction类似于mutation，不同在于：（1）action提交的是mutation，而不是直接变更状态。（2）action可以包含任意异步操作。下面注册一个简单的action，代码如下：conststore=createStore({state:{count:0},mutations:{increment(state){state.count++}},actions:{increment(context){mit('increment')}}})action通常是异步的，store.dispatch()函数可以处理被触发的action函数返回的Promise对象，处理完成后仍旧返回Promise对象。Vuex状态异步更改方法actions:{actionA({commit}){returnnewPromise((resolve,reject)=>{setTimeout(()=>{commit('someMutation')resolve()},1000)})}}store.dispatch('actionA').then(()=>{//...})actions:{//...actionB({dispatch,commit}){returndispatch('actionA').then(()=>{commit('someOtherMutation')})}}07Vuex状态模块化管理PART模块动态注册使用store.registerModule()函数注册模块，代码如下：import{createStore}from'vuex'conststore=createStore({/*选项*/})//注册模块'myModule'store.registerModule('myModule',{//...})//注册嵌套模块'nested/myModule'store.registerModule(['nested','myModule'],{//...})通过store.state.myModule和store.state.nested.myModule访问模块的状态。模块动态注册指通过其他Vue3插件在store中附加新模块的功能，从而使用Vuex管理状态。例如，vuex-router-sync插件就是通过动态注册模块将VueRouter和Vuex结合，实现应用的路由状态管理。开发者可以使用store.registerModule(moduleName,module)函数动态注册模块。可以使用store.unregisterModule(moduleName)函数动态卸载模块。需要注意的是，无法卸载静态模块（即创建store时声明的模块），使用store.hasModule(moduleName)函数来检查该模块是否已经被注册到store。需要注意嵌套模块应该以数组形式传递给registerModule和hasModule，而不是以路径字符串的形式传递给module。Vuex状态模块化管理模块重用创建一个模块的多个实例的需求如下：（1）创建多个stor