42-组件-数据传递vuex举例

这里我们会通过三个阶段来展现同一个功能,比较优劣

效果图.gif

0.bugs

image.png
image.png

一.Vue原生数据传递实现平级组件数据共享

1.父组件方法传递给子组件
2.将子组件数据传递给父组件
3.在父组件方法中修改父组件的数据
4.将父组件的数据传递给另外一个子组件

image.png
image.png
image.png

二.直接修改vuex中的state(共享数据)

1.创建数据仓库并定义数据
2.注册创建的仓库
3.在组件中通过this.$store.state.数据名称调用共享数据

image.png
image.png

直接修改共享数据的弊端
为排查错误添加障碍
所有组件都能修改,一旦组件数目增加,修改发生错误,很难排查是哪个组件的操作除了问题
所以在实际的企业开发中,每一个组件都能读取共享数据中的内容,但是如果要修改其中的内容,必须通过mutations属性中定义的方法,修改共享数据,就像是类中的私有数据,中能通过调用公共方法修改

image.png

三.通过mutations修改state

1.定义mutations中的修改数据的方法
2.修改数据时调用方法
this.$store.commit("方法名称")

image.png
image.png
image.png