[{"createTime":1735734952000,"id":1,"img":"hwy_ms_500_252.jpeg","link":"https://activity.huaweicloud.com/cps.html?fromacct=261f35b6-af54-4511-a2ca-910fa15905d1&utm_source=V1g3MDY4NTY=&utm_medium=cps&utm_campaign=201905","name":"华为云秒杀","status":9,"txt":"华为云38元秒杀","type":1,"updateTime":1735747411000,"userId":3},{"createTime":1736173885000,"id":2,"img":"txy_480_300.png","link":"https://cloud.tencent.com/act/cps/redirect?redirect=1077&cps_key=edb15096bfff75effaaa8c8bb66138bd&from=console","name":"腾讯云秒杀","status":9,"txt":"腾讯云限量秒杀","type":1,"updateTime":1736173885000,"userId":3},{"createTime":1736177492000,"id":3,"img":"aly_251_140.png","link":"https://www.aliyun.com/minisite/goods?userCode=pwp8kmv3","memo":"","name":"阿里云","status":9,"txt":"阿里云2折起","type":1,"updateTime":1736177492000,"userId":3},{"createTime":1735660800000,"id":4,"img":"vultr_560_300.png","link":"https://www.vultr.com/?ref=9603742-8H","name":"Vultr","status":9,"txt":"Vultr送$100","type":1,"updateTime":1735660800000,"userId":3},{"createTime":1735660800000,"id":5,"img":"jdy_663_320.jpg","link":"https://3.cn/2ay1-e5t","name":"京东云","status":9,"txt":"京东云特惠专区","type":1,"updateTime":1735660800000,"userId":3},{"createTime":1735660800000,"id":6,"img":"new_ads.png","link":"https://www.iodraw.com/ads","name":"发布广告","status":9,"txt":"发布广告","type":1,"updateTime":1735660800000,"userId":3},{"createTime":1735660800000,"id":7,"img":"yun_910_50.png","link":"https://activity.huaweicloud.com/discount_area_v5/index.html?fromacct=261f35b6-af54-4511-a2ca-910fa15905d1&utm_source=aXhpYW95YW5nOA===&utm_medium=cps&utm_campaign=201905","name":"底部","status":9,"txt":"高性能云服务器2折起","type":2,"updateTime":1735660800000,"userId":3}]
概念:
专门在Vue中实现集中式状态(数据)管理的一个Vue插件 对Vue应用中多个组件的共享状态进行集中式的管理(读/写) 也是一种组件间通信的方式
适用于任意组件通信
安装vuex,vue2.0下载vuex3版本,vuex4版本只试用于vue3.0以上版本,然后使用Vue.use来使用vuex插件
建立store文件夹,新建index.js文件
新建一个count插件,写入简易计算器结构
在App.vue中引用该插件后启动
此时我们使用vuex来为按钮进行事件的绑定来动态修改数据
state存放数据sum,组件中读取vuex的数据 $store.state.sum
组件中修改vuex的数据
$store.dispatch('action中的方法名',数据)或$store.commit('mutations中的方法名',数据)
备注: 若没有网络请求或者其他业务逻辑 组件中也可以越过actions 不写dispatch直接编写commit
getters的使用
概念:当state中的数据需要经过加工后再使用时 可以使用getters加工
map映射的方法
mapState方法:用于帮助我们映射state中的数据为计算属性
上面在绑定数据时可以看到总是要多次书写$store.state,代码重复,不够美观,我们此时可以借用计算属性来实现我们的代码简化:
此时我们可以使用传统的计算属性来返回对应的数据,使得模板中绑定的数据进行一定程度的简化,可是此时我们看到计算属性中又书写了相似结构重复的代码,我们此时就可以使用vuex提供的mapState方法进行再次简化
mapGetters和mapState有相同的用法:
mapActions:用于帮助生成与actions对话的方法 即包含 $store.dispatch(xxx)的函数
mapMutatinos:用于帮助生成与mutations对话的方法 即包含$store.commit(xxx)的函数
下面开始进行共享vuex中的数据
再新建一个组件
让Atm组件中获取count组件计算的sum放大后的结果数据,而让count组件获取Atm组件的奥特曼列表长度数,从而实现数据共享