组件传参和Vuex

组件传参

组件

• 作用：
  • 1、组件是vue的一个重要的特点
  • 2、实现多人协作开发
  • 3、通过组件划分降低开发的难度
  • 4、实现复用，降低重复劳动
• 组件解释
  • 组件就是定义好的一功能模块
    • 建议：多用props,少在组件中使用data (降低组件的耦合性，提高复用性)
• 定义与使用
  • 1定义: 注意：template有且只有一个根节点
    • const steper = {template: `<span></span>`}
  • 2在父组件中注册
    • components:{steper:stepter}
  • 3在组件的模板中使用
    • <steper></steper>

• 传参

  • 父组件 传 子组件
    • 父组件 <modal:visible="visible">
    • 子组件 props:{visible:{type:Boolean,default:false}}
    • 子使用
      • 注意：vue是单向数据流，父组件传递给子组件的props是只读（不能修改）this.visible
  • 子组件 传 父组件
    • 子组件
      • this.$emit("update:visible", false)
    • 父组件
      监听事件，修改值
      • <modal @update:visible="visible=$event">
    • 事件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 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

安装

在脚手架 创建项目时勾选vuex的选项系统会自动创建

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

Vuex五个核心

1、state 存放状态

        $store.state.xxx访问

2、mutations 改变状态的唯一方法

        SET_SCORE(state,data){}   $store.commit("xxx",data)

3、actions 异步操作数据的方式

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

   $store.dispatch.("xxx",data)

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

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

    $store.getters.xxx

5、moudule子模块

        把登录功能放在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呢)

        1、重复利用

                登录的api也会调用多次

        2、方便集中管理

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