©2020-2024 ioDraw All rights reserved
概念:
专门在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组件的奥特曼列表长度数,从而实现数据共享