父子组件的通讯
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) {
// …
})
