组件之间的数据通信-vuex

组件之间的数据通信有如下几种

父子组件之间数据通信

第一种：父-->子 props传递数据；子-->父 触发自定义事件的形式

第二种：provide....inject结构 父组件provide抛出数据，子组件inject接收数据

非父子组件之间数据通信

第一种：事件总线Bus（空vue对象）

第二种：状态管理库vuex

 

*状态管理库vuex:*

Vuex是一个专为Vue.Js应用程序开发的管理库。状态就是指组件之间共享的数据

Vue项目中配置状态管理库vuex的流程

1. 下载并引入vuex相关内容

2. 创建状态管理库对象store

3. 对外抛出store对象

4. 在mian.js中将store对象与当前项目相关联

Store状态管理库对象重要组成部分

State:组件之间共享的数据集合

组件中获取方法

1.直接获取 this.$store.state.xxx;

2.使用对象展开运算符的形式获取…mapState([‘count’,’users’])

Getters:相当于store对象计算属性（主要用于对state的数据进行过滤）

组件中获取方法

1. 直接获取this.$store.getters;

2. 使用对象展开运算符的形式获取 …mapGetters([‘xxx’,’xxx’])

Mutations:定义了修改store对象中state数据的同步方法(要修改的数据不是ajax异步获取的)

组件中如何触发

1.直接使用commit触发 this.$store.commit(‘xxxx’,’传递的参数’)

2.使用对象展开运算符mapMutations的形式获取 ...mapMutations([‘xxx’,’xxx’])

Actions:定义了修改state数据的异步方法（修改数据是ajax获取的异步数据）

组件中如何触发

1.直接使用dispatch触发 this.$store.dispatch(‘xxxx’,’传递的参数’)

2.使用对象展开运算符mapActions的形式获取 mapActions([‘xxx’,’xxx’])