这里我们会通过三个阶段来展现同一个功能,比较优劣
效果图.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
