《Vue.js前端开发实战（慕课版第2版）》课件 第14--16章 状态管理; 综合开发实例——51购商城;课程设计——智汇企业官网首页设计.ppt

商品详情页面的设计图片放大镜效果的实现商品概要功能的实现猜你喜欢功能的实现选项卡切换效果的实现购物车页面的设计与实现购物车页面的设计购物车页面的实现购物车页面的设计购物车页面的实现购物车页面顶部底部主显示区付款页面的设计与实现付款页面的设计付款页面的实现付款页面的设计付款页面的实现登录和注册页面的设计与实现登录和注册页面的设计登录页面的实现注册页面的实现登录和注册页面的设计登录和注册页面的设计状态管理Vuex简介Vuex的安装基础用法实例AI辅助编程Vuex简介Vuex是一个专门为Vue.js应用程序开发的状态管理模式。它采用集中式存储来管理应用程序中所有组件的状态。Vuex的安装scriptsrc=/vuex@next/script代码使用CDN方式在安装Vuex时，要安装支持Vue3.0的Vuex需要使用vuex@next，要安装支持Vue2.x的Vuex需要使用vuex。npminstallvuex@next--save命令使用NPM方式yarnaddvuex@next--save命令使用yarn方式使用VueCLI创建项目在项目的配置选项中应用空格键选择Vuex基础用法Vuex的组成在项目中使用VuexVuex的组成存储项目中需要多组件共享的数据或状态Vuex组成statemutationsgettersactionsmodules从state中派生出状态存储更改state状态的方法通过提交mutations中的方法来改变状态store的子模块在项目中使用Vuex创建store定义state定义getter定义mutation定义action创建storestore/index.jsimport{createStore}fromvuex

exportdefaultcreateStore({

state:{

},

getters:{

},

mutations:{

},

actions:{

},

modules:{

}

})main.jsimport{createApp}fromvue

importAppfrom./App.vue

importstorefrom./store

createApp(App).use(store).mount(#app)定义state在store实例的state中可以定义需要共享的数据定义getter如果需要从state中派生出一些状态就需要使用getter。getter相当于Vue中的computed计算属性，getter的返回值会根据它的依赖被缓存起来，只有当它的依赖值发生改变时才会被重新计算。getter会接收state作为第一个参数。定义mutation每个mutation都有一个字符串的事件类型（type）和一个回调函数（handler）。这个回调函数可以实现状态更改，并且它会接收state作为第一个参数。在store实例的mutations中定义更改state状态的函数，然后在组件中应用commit方法提交到对应的mutation，实现更改state状态的目的。更改state中的状态定义actionaction提交的是mutation，而不是直接更改状态action和mutation的区别action可以异步更改state中的状态实例在电子商务网站中，使用sessionStorage和Vuex保存用户登录状态。实例AI辅助编程选项卡切换图片效果管理计数器状态综合开发实例——51购商城02主页的设计与实现03商品详情页面的设计与实现04购物车页面的设计与实现05付款页面的设计与实现登录和注册页面的设计与实现06项目的设计思路01利用AI分析优化项目07项目的设计思路项目概述界面预览功能结构文件夹组织结构项目概述网站的功能页面商城主页购物车页面商品详情页面付款页面登录注册页面界面预览界面预览功能结构文件夹组织结构主页的设计与实现主页的设计顶部区和底部区功能的实现商品分类导航功能的实现轮播图功能的实现商品推荐功能的实现主页的设计主页的设计顶部区和底部区功能的实现商品分类导航功能的实现轮播图功能的实现商品推荐功能的实现商品详情页面的设计与实现商品详情页面的设计图片放大镜效果的实现商品概