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

猜你喜欢

转载自blog.csdn.net/qq_40999917/article/details/107731531
今日推荐