组件传参及VueX基础

组件传参

子传父 事件$emit

引用父组件$parent

引用组件

$children
$refs

引用根组件

$root
根组件 最大组件

事件bus传参

跨层级访问数据（非父子关系）（$on、 $off、 $emit）

1.创建bus.js

import Vue from 'vue'
var bus = new Vue();
export default bus;

2.在要发送数据的组件中导入bus并使用bus.semit

3.在有接收数据的组件中导入bus并使用bus.$on (注意this)

注意:任意组件只要导入bus就可以随意的发送与监听数据

provider 和inject

依赖注入{跨层级访问(只读)}

provide 提供数据

 所有子孙都可以通过inject注入数据

inject 接收父辈组件提供的数据

VueX

概念解释

Vuex实现数据的全局共享，响应式更新

state(存放状态)

$store.state.xxx访问

mutations(改变状态的唯一方法)

$store.commit("XXX",data)

actions(异步操作数据的方式)

changescore(context,data){
 //在actions中访问mutations
 context.commit("SET_SCORE",data)
 ​}

$store.dispatch( xxx",data)

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

 level(state){
 return state.user.score/100
 }

$store.getters.xxx

moudel 子模块

把登录功能放在store/moudules/userjs actions中

loginView.vue页面执行登录

实现store/modules/user.js实现注销

实现登录成功提示，登录失败提示

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

1.登录后成功的数可以全局共享

2.为了重复利用（登录功能可能不止在登录页面）

1.首页点击弹框登录
2.购物车跳转前，弹框登录
3.登录位置会有很多
如果写在Vuex只需要在登录地方；$store.dispatch"login",data)方法就可以

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

重复利用

登录的api也会调用多次

方便集中管理

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