vuex实现兄弟组件之间传值

「爱情、让人受尽委屈。」 2023-10-11 14:19 150阅读 0赞

vuex传值

我的早前的一篇博客[vue之间的传值][vue]，那时还没有去了解vuex所以没有做这方面的笔记，昨天认真看了一下网上讲解的虽然不能说全部理解透，但是有了一个大致的理解。  
  vuex主要用于管理vue中的数据，但是网上说最好大型项目用，其他的一些中小型或者小型的项目能别用尽量别用（现在还不太理解），vuex中主要包含四类：state、getter、mutations、actions，之间的关系如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rhbmc0MjI2MjI_size_16_color_FFFFFF_t_70]  
  从上图可以很清晰的看到每个状态之间的触发的方法，其中，state主要用于管理项目的数据（进行数据初始化）；getters就要读取state中的数据，相当于computed当数据进行更新时读取数据；mutations主要用于操作state中的数据，说白了就是对state数据进行更改；action 提交的是 mutation，而不是直接变更状态，(dispatch)触发，(参数需要context)。  
  理解了这个图，才能真正的明白各个之间的到底负责什么样的操作。这篇文章主要说兄弟组件之间的传值吧，写一个简单的例子（我在学vuex的时候看的例子）  
![项目目录结构][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rhbmc0MjI2MjI_size_16_color_FFFFFF_t_70 1]  
  上图是我的项目目录结构，主要用到child.vue和helloworld.vue这两个组件，在src文件夹下创建store目录，再创建一个index.js文件。

child.vue组件  
![child][]  
helloworld.vue组件  
![helloworld][]  
store/index.js  
![index][]  
上面就是一个最基本的例子，运行后，打开页面会在显示两个组件中获取到的state值，当在helloworld.vue组件的input输入框中输入内容时，会同时改变两个组件的显示，相当于在helloworld.vue组件中改变信息，child.vue组件中会  
接收到信息，并发生改变。  
  这只是我的很浅的理解，我会继续深入学习并持续更新文章，希望对大家有所帮助，同时也欢迎指出我的错误和不足。

[vue]: https://blog.csdn.net/tang422622/article/details/84668953
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rhbmc0MjI2MjI_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190118092334270.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rhbmc0MjI2MjI=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rhbmc0MjI2MjI_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190118093152878.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rhbmc0MjI2MjI=,size_16,color_FFFFFF,t_70
[child]: https://img-blog.csdnimg.cn/20190118093626183.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rhbmc0MjI2MjI=,size_16,color_FFFFFF,t_70
[helloworld]: https://img-blog.csdnimg.cn/20190118093913859.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rhbmc0MjI2MjI=,size_16,color_FFFFFF,t_70
[index]: https://img-blog.csdnimg.cn/2019011809373594.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rhbmc0MjI2MjI=,size_16,color_FFFFFF,t_70