vuex实现兄弟组件之间传值

vuex传值

  我的早前的一篇博客vue之间的传值，那时还没有去了解vuex所以没有做这方面的笔记，昨天认真看了一下网上讲解的虽然不能说全部理解透，但是有了一个大致的理解。
  vuex主要用于管理vue中的数据，但是网上说最好大型项目用，其他的一些中小型或者小型的项目能别用尽量别用（现在还不太理解），vuex中主要包含四类：state、getter、mutations、actions，之间的关系如下图：

  从上图可以很清晰的看到每个状态之间的触发的方法，其中，state主要用于管理项目的数据（进行数据初始化）；getters就要读取state中的数据，相当于computed当数据进行更新时读取数据；mutations主要用于操作state中的数据，说白了就是对state数据进行更改；action 提交的是 mutation，而不是直接变更状态，(dispatch)触发，(参数需要context)。
  理解了这个图，才能真正的明白各个之间的到底负责什么样的操作。这篇文章主要说兄弟组件之间的传值吧，写一个简单的例子（我在学vuex的时候看的例子）

  上图是我的项目目录结构，主要用到child.vue和helloworld.vue这两个组件，在src文件夹下创建store目录，再创建一个index.js文件。

child.vue组件

helloworld.vue组件

store/index.js

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