组件传参和vuex

组件传参

• 父传子 props
• 子传父 事件$emit
• 引用父组件 $parent
• 引用子组件 $children $refs
• 引用根组件 根组件 最大的组件 $root
• 事件bus传参（跨层级访问数据）（非父子关系）
• 事件bus传参（跨层级访问数据）（非父子关系）

创建bus.js
import Vue from ‘vue’
var bus = new Vue();
export default bus;

在要发送数据的组件中导入bus并使用 bus.$emit
在有接收数据的组件中导入bus 并使用 bus.$on (注意this)
注意：任意组件只要导入bus 就可以随意的 发送与监听数据
bus.o n ( e v e n t n a m e , c a l l b a c k ) 监听事件 b u s . on(eventname,callback) 监听事件 bus.on(eventname,callback)监听事件bus.emit(eventname,data)发送事件
bus.$off(eventname)移除事件
————————————————
版权声明：本文为CSDN博主「m0_64366317」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/m0_64366317/article/details/127435692

•  provider和inject依赖注入跨层级访问(只读)

• provide提供数据所有子孙都可以通过inject注入数据
• inject 接收父辈组件提供的数据

• Vuex全局数据共享

Vuex

解释

• Vuex 实现数据的全局共享，响应式更新
• state存放状态 $store.state.xxx访问
• -mutations 改变状态的唯一方法
• SET_SCORE(state, data){}
• $store. Commit(“xxx”,data)
• actions 异步操作数据的方式

changeScore(context,data){
context.commit(“SET_SCORE”,data)
}

$store. Dispatch(“xxx”,data)

•  getters 从现有的状态计算出新的数据

level(state){
return state.user.score/100
}
$store.getters.xxx

• module子模块
• 把登录功能放在store/moudules/user.js actions中
• loginView.vue页面执行登录
• 实现store/modules/user.js 实现注销
• 实现 登录成功提示，登录失败提示

为什么要把登录转换到vuex中

• 登录后成功的数可以全局共享
• 为了重复利用登录功能可能不止在登录页面

首页点击弹框登录

购物车 跳转前，弹框登录

登录位置会有很多

如果写在Vuex只需要在登录地方$store.dispatch(“login”,data) 方法就可以

 为什么要写api/login.js (定义api呢)

• 重复利用 

登录的api也会调用多次

• 方便集中管理 

 

所有的请求地址与请求方式 api文件中
改请求方式与参数可以直接修改 api内容就可以，不用具体进入到某个组件