40-组件-数据传递vuex
2019-02-27 本文已影响12人
梦想成为小仙女
这里我们要介绍基于vue开发出来的一个工具,用于简化父子间的数据传递,没错,就是vuex,由于是工具,重在使用,我们了解了它的概念之后,重点方在使用步骤上
image.png
https://vuex.vuejs.org/
https://vuex.vuejs.org/zh/guide/
0.重点
Vuex通过Store构造函数创建仓库对象保存共享的数据,在需要用到的组件中注册,就能通过$store.state.数据名称访问
1.bugs
1.
image.png
构造函数创建对象忘记加new
image.png
2.模板没有根元素是常犯的错误
image.png
image.png
3.出现多余字符造成界面出现差错
image.png
4.id写错
image.png
image.png
一.什么是Vuex
vuex是Vue配套的公共数据管理工具,它可以保存共享的数据,方便程序中任何组件都可以很方便的调用
vuex中只保存需要共享的数据,也就是需要多个组件共同使用的数据,比如:我们执行加入购物车操作,购物车标识右上角的数字会加一,表明购物车组件中的count和加入购物车组件中的count是共享的,应该放在vuex中
二.如何使用
1.导入vuex
我们在官网直接拷贝源代码到js文件夹下的vuex.js文件中,并在Vue导入之后导入,因为它是依赖于Vue的
2.创建一个仓库
new Vuex.Store()
3.通过数据仓库的state属性保存需要共享的数据
给上面的Store构造函数传递参数{
state:{
msg:"佩奇"
}}
4.将数据仓库对象绑定到Vue上
store:仓库名称
5.通过{{[this.]$store.state.msg}}访问vuex共享仓库中的数据
三.代码验证
image.png
image.png
image.png
