Vue组件之间的传值

1、父传子

1.父传值

1.1父组件自定义一个数据（例如：ftosValue)

1.2经过自定义属性的方式将ftosValue传给子组件

2.子接值

2.1经过特定属性：props来进行接收

2.2直接以属性的方式来使用参数{{ ftos }}

2、子传父

1.子传值

1.1子组件中定义一个数据（例如：stof）

1.2经过自定义事件的方式将stof传给父组件（格式：this.$emit('事件名',参数）

this.$emit('to',this.abc)

2.父接值

2.1给子组件实现方法：to

2.2方法中有一个参数，这个参数就是abc

3、兄弟传值（解决兄弟之间的传值）

1.建立一个公共的bus对象(bus.js)

2.将兄弟1的参数给bus

3.兄弟2中接收bus的参数

4、Vuex全局状态数据管理

1.下载vuex包并导入use一下

2.须要new一下 写上全局数据

3.须要挂载到new vue上

这个步骤是写死的，下载使用脚手架直接就能够选vuex

使用逻辑：操做全局vuex的state数据

正常状况下必须dispatch(action)-->actions去commit触发mutation-->mutation里面才能修改state全局数据 / actions-->mutation-->修改state

其余状况也能够跳过action去直接commit mutation-->修改state全局数据

使用Vuex

1.在state中定义数据

2.Getter至关于vue中的computed计算属性，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被从新计算，Getters 能够用于监听、state中的值的变化，返回计算后的结果

3.给action注册事件处理函数，当这个函数被触发时候，将状态提交到mutations中处理。actions里面自定义的函数接收一个context参数和要变化的形参

4.mutations是一个对象里面的方法都是同步，是更改state初始状态的惟一的方法，具体的用法就是给里面的方法传入参数state或额外的参数

dispatch：含有异步操做，例如向后台提交数据，写法： this.$store.dispatch('action方法名',值)

commit：同步操做，写法：this.$store.commit('mutations方法名',值)

Vuex怎么合理规范管理数据，及mutations和actions区别

解析：此题考查vuex中数据的管理和数据结构的设计，还有mutations和actions的区别
解答：首先要明确一个特别重要的原则，就是否是全部的数据都要放在vuex中，由于vuex有一句名言:假如你并不知道为何要使用vuex,那就不用使用它!

那什么样式的数据须要放在vuex中呢?首先这个数据要被多个组件频繁用到,若是只是被一个组件用到,那彻底没有必要为了使用vuex而使用vuex

举例:一个网站用户的昵称,帐号,资料,像这种系统级别的信息,随时可能在业务中展现和使用,若是在组件中储存,那么要获取n次,因此系统级别的数据是须要放置在vuex中的,那么系统级别数据也不能因此的放置,为了让数据看着更有层级结构,能够按照像下面这样设计

上面这种结构,一看便知道咱们应该哪里货物系统数据即设置数据

若是有些业务数据,也须要共享,最好按照模块的具体业务含义分类,好比下面:

如上图代码所示,咱们很清晰的可以分清楚每一个模块的数据,这样不会致使数据管理的混乱

mutations和actions的区别

不一样于redux只有一个action,vuex单独拎出了一个mutations,它认为更新数据必须是同步的,也就是只要调用了提交数据方法,在mutation里面才能够修改数据

那么若是咱们想作异步请求,怎么作?这里vuex提供了专门作异步请求的模块,action,固然action中也能够作同步操做,只不过度工更加明确,全部的数据操做,不管是同步仍是异步,均可以在action中完成

mutation只负责接收状态,同步完成数据快照

因此能够认为

state => 负责存储状态

mutations => 负责同步更新状态

actions => 负责获取 处理数据(若是有异步操做必须在action处理 再到mutation),提交到mutation进行状态更新

vuex模块化module管理,使用的时候有注意事项

分析:当vuex维护数据愈来愈复杂的时候,模块化解决方案
解析:使用单一的状态树,应用的全部状态都会集中在一个比较大的对象上面,随着项目需求的不断增长,状态树也会变得愈来愈臃肿,增长了状态树维护的复杂度,并且代码变得沉长;所以咱们须要modules(模块化)来为咱们的状态树分离成不一样的模块,每一个模块拥有本身的state,getters,mutations,actions;并且容许每一个module里面嵌套子module;以下:

上面的设计中,每一个vuex子模块均可以定义state/mutations/actions

须要注意的是,咱们原来使用vuex辅助函数
mapMutations/mapActions引入的是全局的mutations和actions,而且咱们vuex子模块也就是module1,module2...这些模块的action/mutation也注册了全局

也就是若是module1中定义了loginMutation,module2中也定义了loginMutation,此时,mutation就冲突了

若是重名,就报错了...

若是不想冲突,各个模块管理本身的action和mutation,须要给咱们的子模块一个属性namespaced:true

那么组件中怎么使用子模块的action和mutations

步骤基本是死的 熟悉就行了

此题具体考察Vuex虽然是一个公共状态,可是公共状态还能够切成若干个子状态模块,也就是moduels

解决当咱们的状态树过于庞大和复杂时的一种方案,可是笔者认为,一旦用了vuex,几乎就认定该项目是较为复杂的