欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue学习之父子组件通讯,Vuex与购物车修改删,导航守卫解决权限路由问题详解

程序员文章站 2022-09-16 19:38:25
父子组件的通讯 1.父组件通过prop向下传递,  接收方,子组件中声明props props:['goodsId',goodsCount] 传值方...

父子组件的通讯

1.父组件通过prop向下传递, 

接收方,子组件中声明props props:['goodsId',goodsCount]

传值方,父组件 

导入子组件import inputnumber from '..'

template中使用 <inputnumber :goodsId="" :goodsCount="" />>

在components中注册

2.子组件通过事件向上传递 

接收方,父组件中写好v-on监听事件,并写好处理函数@countChange="getChangeCount" 

把子组件的数量赋值给父组件数量getChangeCount(goods){}形参接收子组件传递的数据

传值方,子组件使用$emit()触发事件,传递payLoad this.$emit('countChange',goods)

payLoad{goodsId:”87”,goodsCount:2}

vuex 的使用

什么是vuex? 可理解为仓库,专门为vue.js开发的状态(数据)管理模式

跨组件通讯,多个组件都需要操作一个数据

使用: 1.安装; 2.导入,Vue.use();3.const store = new Vuex.Store()创建一个仓库对象; 4.注入到根实例,就有全局状态管理功能

核心概念:

state 仓库中的数据 buyCount:0

getter 仓库中获取数据 模板中{{this.$store.getters.getBuyCount}}

mutation 同步的方式操作数据的增删改

action 异步的方式操作数据的增删改

module 需要创建多个仓库时

购物车的数量修改

1.利用计算属性原理,父子组件的修改数量,实现页面总数和总金额的同步;

2.更新全局的buycount (用vuex); 

shopcart.vue–>main.js的mutations中的updateGoods方法,在updateGoods中–>localStorageTool中updateLocalGoods方法

上面方法更新完毕后 将localStorage中最新的值返回给vuex中的buyCount(自动更新app.vue中的购物车总数)

3.更新localStorage中的id和数量;

对象的增加和改值方法 

* var obj=[“89”:2,”88”:3] 

* 改值 obj[“89”]=5 //[“89”:5,”88”:3] 存在key就是改值 

* 增加 obj[“78”]=2 //[“78”:2,”89”:5,”88”:3] 不存在key就增加 

* 删除 delete obj[key];

删除购物车商品(同修改购物车商品数量)

shopcart.vue中添加点击事件deleteGoodsById, 传入item.id @click="deleteGoodsById(item.id)"

main.js中调用mutations中deleteGoods方法

localStorage中deleteLocalGoods方法

返回vuex中最新的buyCount值

生命周期钩子函数

created 组件创建完毕

mounted 组件渲染完毕 (通常需要增加延时setTimeOut)

updated 数据更新时

声明式 编程式导航(路由)

声明式 <router-link to...> 写在组件模板template中

编程式 router.push(...) 写在js中 通过this.$router.push(…)来触发路径

route和route和router区别:route:获取路径中得参数;route:获取路径中得参数;router:编程式导航

导航守卫解决权限问题

进入到需要权限的组件(order.vue),首先判断是否登录,如果登录,就跳转到订单详情页面;没有登录,跳转到登录页面,登录成功后跳转到目标页面;

需要解决以下几个问题?

1.对所有路由进行拦截 

导航守卫实质是一个函数,当我们有路由切换时,就会调用该函数

2.判断是否登录; 已经登录,跳转到订单详情页面;否则跳转到登录页面,登录成功后跳到目标页面

使用:

const router = new VueRouter({})

router.beforeEach((to, from, next) =>{} 每次路由切换时会触发 

to:Route: 即将要进入的目标 路由对象

from: Route: 当前导航正要离开的路由

next: 决定你是否能继续往下走,可以理解成是一个开关

meta: { requiresAuth: true }给路由规则添加额外条件 判断是否需要权限

to.meta.requiresAuth判断是否直接next(), 

如果不是, 判断是否登录,没有登录next('/login') ;已经登录next()

登录组件(main.js中需要设置开启cookieaxios.defaults.withCredentials=true;)

获取表单输入的内容

发起请求

返回数据发送bus.$emit('isLogin',true)

App.vue中获取bus.$on('isLogin',function(isLogin){})

登出

提交get请求

退出成功 

this.isLogin=false

this.$router.push{path:'/goodslist'}回到商品列表

非父子组件通讯 (login.vue 和 App.vue)

创建新的的Vue 作为事件的总线(公共的Vue对象)

// 触发组件 A 中的事件 (发送方login.vue) 

bus.$emit(‘id-selected’, 1)

// 在组件 B 创建的钩子中监听事件 (接收方App.vue) 

bus.$on(‘id-selected’, function (id) { 

// … 

})