getter方法的作用 vuex_Vuex 数据流管理

• Vue组件通信方式

• Vuex核心概念和基本使用回顾

组件内的状态管理流程

状态管理

• state：驱动应用的数据源

• actions：响应在view上的用户输入导致的状态变化

• view：以申明的方式将state映射到视图

单向数据流

箭头是数据的流向，此处数据流向是单向的 ，数据绑定到视图展示给用户，当用户和视图交互通过actions更改数据后，在把更改后的数据绑定到视图

组件间通信方式回顾-父组件给子组件传值

• 父组件给子组件传值

  • 字符串中通过props接受数据

  • 父组件中给子组件通过相应属性传值

//父组件

Props Down Parent





//子组件

Props Down Child

{ { title }}





• 子组件给父组件传值

  • 通过自定义事件子组件给父组件传值

  • 在父组件注册子组件的事件

  • 在子组件触发事件向父组件传值

//父组件

Event Up Parent


这里的文字不需要变化





//子组件

Props Down Child

文字增大





• 不相关组件之间传值

  • 自定义事件传值event-bus

  • 创建event-bus文件创建vue实例并导出，只需要使用此vue对象的 $on #emit方法注册和触发方法

  • 需要传值的组件中引入该对象并注册或者触发事件

//event-bus事件中心
import Vue from 'vue'
export default new Vue()

//组件1

Event Bus Sibling01

-

+