vuex作用：用来集中式管理数据
集中式的应用，当前有四个组件A,B,C,D，假如现在有一个数据x在A里面，现在其他三个组件都要用到x并且好要修改x的时候，有一种方法就要用到全局事件总线，如下图所示
像上面这样不够简练，因此出现了vuex这个东西，vuex就是专门用来存储一些经常要用到的数据，相当于一个公共的数据区域，所有组件都可以访问修改。
vuex工作原理图
其中components就是相当于是 顾客，action就是相当于是 服务员，mutation就是 后厨，state相当于是 菜(全局数据)，每一次组件会有对全局数据修改请求就会先进行派遣比如要对sum加上5，会发送这么一个东西(add,2)到action(服务员)处，由action提交到mutation(后厨处)，mutation会对state(数据)进行加工，最后state会自动呈现到components(顾客)处。
vuex由三个部分组成，其中actions和mutation和state的数据类型都是对象，这三个东西都要经过一个store()的领导，图中dispatch和commit都是store.dispatch和store.commit
actions会连接到另一个服务器请求数据。
所有业务逻辑都要写到action里面，如果没有业务逻辑也可以直接和mutation对话
一下以一个例子做vuex的演示
上图逻辑如下
在安装vuex插件后会多出一个store,里面应该配置如下所示，store会暴露给所有的组件的每一个组件都可以使用this.$store.加上commit或是dispatch去对应相应的活动流程。
在上上图的4个button分别绑定了如下所示的四个函数，其中前两个是直接跨过action和mutation对话，所以是使用commit和ADD以及JIAN
store配置
context：上下文?可以找到很多信息？
可以看见state里面是存在一个全局数据sum，在mutation里面有两个加工操作，ADD和JIAN，单纯的加和减，在action才是实现了两个按钮的业务逻辑，
vuex中一个新的配置项getters
getters作用:根据state中的值计算新的值
应用场景:当我们显示当前的和的10倍时,或是需要需要做一些别的计算时，我们有很多种方法可以去实现，watch，computed….，但是当逻辑变的复杂且复用变多了就需要每一个组件里面都写，更麻烦了，这时候就可以用上getters
store中配置，getters中的函数是可以得到state作为参数的，里面的属性的值和comouted一样需要由返回值来确定。
组件里面就可以直接的调用store里面的getters中的bigsum获取数据，state和getters如同vue里面的data和comouted。
注意点：
1.在模板里面访问state不用加this，在js里面访问state则需要加this
2.在context里面，我们可以看见是可以访问到state的，里面也有sum，但是我们也不能直接在action里面的对state进行更改，因为这样做会使得开发者工具失效，开发者工具始终监视着mutation，活动不经过mutation而是直接修改state的话不方便开发者工具调试。
vuex代码优化
在上面的例子中，模板里面要用到数据都要家伙是哪个一连串的前缀，不符合模板语句要简洁的思想，想要直接用写sum和bigsum表示和以及大和需要用到一个新的配置项叫做maostate用来映射状态(数据)。
在comouted里面用到一个mapSteta的对象类型数据，这个是vuex已经封装好的一个东西，用之前需要先进行引入
对象写法
上面mapState是一个对象类型的数据，computed也是一个对象，一般是不能在一个对象里面写另一个对象数据的，但这里用到了es6的新语法，’…’，这三个点的作用就是把mapState里面的对应的key和value都放到computed里面,mapSteate会自动生成绑定数据
数组写法
以上就是使用mapState的方式
同理，从getters里面读数据也有一个专门的配置项叫做mapGetters，用法和上面的一模一样，这里不再过多赘述
既然state和gettters有优化，那么actions和mutations也会有优化
mutations和Actions代码优化
以求和的例子来讲，和上面的基本一样，需要设定方法名和找到store中的方法名，但是还有一个value需要传，这个就写到template里面。对象写法和数组写法推荐用对象写法,因为数组写法里的元素需要直接写store里面的参数名字
modules的使用(将来在开发中的地位其重要)
作用：定义state的子模块
需要有一个新东西叫做namespaced(命名空间)，不同模块的共享数据由不同的modules组成，不同的子模块要专门开一个新的文件来放，这一块的视频因为过于繁杂，建议以后复习直接看视频吧
116_尚硅谷Vue技术_vuex模块化+namespace_2_哔哩哔哩_bilibili
另外，找到一个好东西axios网络请求
axios使用
store里面的配置，放在actions里面，每一次请求成功都会去调用放在mutations里面的ADD_PERSON方法添加一个新的对象
组件部分代码
两个按钮分别绑定不同的事件，一个是直接到mutation里找，一个是通过actions去网上找
最后效果如下:
用来接收网络请求的网址：
Original: https://blog.csdn.net/m0_62327332/article/details/128414256
Author: 北岭山脚鼠鼠
Title: Vue3——vuex的使用——axios网络请求的使用
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/777888/
转载文章受原作者版权保护。转载请注明原作者出处！