40-组件-数据传递vuex

这里我们要介绍基于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