Vue全家桶(Vue+Vue-router+Vuex+axios)

Vue全家桶(Vue+Vue-router+Vuex+axios)

1.Vue,用Vue脚手架工具vue-cli搭建了Vue项目;
2.Vue-router,Vue的路由,
路由在全家桶里面定位是什么呢,创建单页应用!简单!我们知道Vuejs是一系列的组件组成应用,既然是组件那么就需要组合起来,将组件(components)映射到路由(routes),然后告诉 vue-router 在哪里渲染它们!
3.Vuex状态管理,
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。什么是状态管理?可以简单理解为管理数据流,多页面共享一个data库(全局)。
vuex就肯定会有State、Actions、Mutations、Getters、Moudles
(1)State
Vuex 使用 单一状态树 —— State,用一个对象就包含了全部的应用层级状态。就是放页面共享数据的地方。(私有数据还是放自己.vue文件更好)
(2)Actions  
Action 类似于 mutation,不同在于:
Action 提交的是 mutation,而不是直接变更状态。
Action 可以包含任意异步操作。
就是说异步方法放入Actions,如ajax请求,求情获取到数据之后显示提交mutation里面的方法来改变state。
(3)Mutations
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。一条重要的原则就是要记住 mutation 必须是同步函数。组件中使用 this.$store.commit(‘xxx’) 提交,在action里面使用commit(‘xxx’) 提交。
(4)Getters
有时候我们需要从 store 中的 state 中派生出一些状态,Vuex 允许我们在 store 中定义『getters』(可以认为是 store 的计算属性)。Getters 接受 state 作为其第一个参数
(5)Modules
简单点说就是为了方便操作和管理,模块化。
由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。
为了解决以上问题,Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。
4.axios
就是封装的ajax,可以根据自己的项目情况再进行封装,然后action中调用。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
易购商城是一个基于Vue框架开发的前端毕设项目。在该项目中,我使用VueVuexVue Router、Element UI、Axios等技术和库来实现各种功能。 首先,Vue是一种流行的前端框架,它具有响应式的数据绑定和组件化的特性,使得开发者可以轻松构建交互性强、高效的单页面应用。 其次,我使用Vuex来管理应用的状态。Vuex提供了一种集中式的状态管理方案,帮助我管理和共享全局的数据,使得不同组件之间的通信更加便捷。 Vue Router是Vue官方提供的路由管理库,用于实现页面之间的导航和路由跳转。我使用它来定义和管理不同页面之间的跳转逻辑,使得用户可以通过URL来访问和导航各个页面。 Element UI是一套基于Vue的桌面端组件库,它提供了丰富的UI组件和样式,使得我可以快速构建出美观和功能完善的界面。 为了与后端进行数据交互,我使用Axios库。Axios是一个基于Promise的HTTP客户端,可以在前端与后端进行异步数据交互,使得用户可以实现登录、注册、添加购物车、结算等功能。 最后,我还使用Vue插件vue-echarts和vue-awesome-swiper来实现商品数据的可视化展示和轮播图功能。这些插件都提供了强大且易用的功能,使得易购商城的用户界面更加丰富和吸引人。 总体来说,通过使用VueVuexVue Router、Element UI、Axios等技术和库,我成功地实现了易购商城的前端开发工作,提供了丰富的功能和良好的用户体验。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值