Vue全局数据共享技术Vuex

概念:

   专门在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组件的奥特曼列表长度数,从而实现数据共享