组件的传参及VueX

• 组件的传参

  • 父传子 props
  • 子传父 事件$emit
  • 引用父组件$parent √
  • 引用子组件
    • $children √
    • $refs √
  • 引用根组件
    • $root
  • 根组件 最大组件
  • 事件bus传参（跨层级访问数据）（非父子关系）
    • 1. 创建bus.js
      • import Vue from 'vue'
      • var bus = new Vue();
      • export default bus;
    • 2. 在要发送数据的组件中导入bus并使用 bus.$emit
    • 3. 在有接收数据的组件中导入bus 并使用 bus.$on (注意this)
    • 注意：任意组件只要导入bus 就可以随意的 发送与监听数据
    • 
      bus.$on(eventname,callback) 监听事件
      bus.$emit(eventname,data)发送事件
      bus.$off(eventname)移除事件
    • 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){ //在actions中访问mutations 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中
    • 1. 登录后成功的数可以全局共享
    • 2. 为了重复利用登录功能可能不止在登录页面
      • 1. 首页点击弹框登录
      • 2.购物车 跳转前，弹框登录
      • 3. 登录位置会有很多
      • 如果写在Vuex只需要在登录地方$store.dispatch("login",data) 方法就可以
  • 为什么要写api/login.js (定义api呢)
    • 重复利用登录的api也会调用多次
    • 方便集中管理 所有的请求地址与请求方式 api文件中改请求方式与参数可以直接修改 api内容就可以，不用具体进入到某个组件