Vue_002状态管理

状态管理是啥

状态是什么

  • UI状态 (不存在数据库里的)
  • 用户状态 (存到数据库里的)

状态管理是什么

  • 父子组件通信

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    父组件 有个 n
    子组件 有个按钮 点击之后触发回调函数 ==> n+1

    这样就导致——耦合(有上有下) 如果自组件里的按钮换成里 element的 btn 
    那么还必须要求 element有一个回调函数

    # 解耦
    vue优化的地方提供了一个统一的方法
    this.$on('xxx')
    this.$emit('xxx')
    # 但是这仅仅适合父子通信  如果是爷孙就要 爷父 父子 层层传递，非常麻烦

    # vue 是如何实现让每层的组件 都有 emit/on 方法呢(如何构建整个事件体系的)
    原理是 让所有的 VueComponent extends EventEmit
    原型链    Object--->Vue---->EventEmiter----> VueComponent

    # 不讨论 vuex 之前 跨层级通信 我们可以这样
    var eventBus = new Vue()
    eventBus.$on(xxx)
    eventBus.$emit(xxx)

  • 数据的传递过程

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    a1的 n 传递给 a4 单向数据流
    要经过 a1 ==> a2 ==> a3 ==> a4
    <root>
        <a1>
            <a2>
                <a3>
                    <a4>{{n}}</a4>
                </a3>
            </a2>
        </a1>
    </root>

    但如果用 父子通信就要 
    同时 层层 props 传递 n
    a4.$emit(x) ==> a3.$emit(x) ==> a2.$emit(x) ==> a1.$emit(x) ==> root.$emit(x) 非常麻烦

    优化的一个方法是 window.eventHub = new Vue()
    root 那里 eventHub.$on(x)
    a4 那里 eventHub.$emit(x)