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

父子组件的通讯

• 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和$router区别:$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) {
  // …
  })