Vue3——vuex的使用——axios网络请求的使用

vuex作用:用来集中式管理数据

集中式的应用,当前有四个组件A,B,C,D,假如现在有一个数据x在A里面,现在其他三个组件都要用到x并且好要修改x的时候,有一种方法就要用到全局事件总线,如下图所示

Vue3——vuex的使用——axios网络请求的使用

像上面这样不够简练,因此出现了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对话

Vue3——vuex的使用——axios网络请求的使用

一下以一个例子做vuex的演示

Vue3——vuex的使用——axios网络请求的使用

上图逻辑如下

Vue3——vuex的使用——axios网络请求的使用

在安装vuex插件后会多出一个store,里面应该配置如下所示,store会暴露给所有的组件的每一个组件都可以使用this.$store.加上commit或是dispatch去对应相应的活动流程。

Vue3——vuex的使用——axios网络请求的使用

在上上图的4个button分别绑定了如下所示的四个函数,其中前两个是直接跨过action和mutation对话,所以是使用commit和ADD以及JIAN

Vue3——vuex的使用——axios网络请求的使用

store配置

context:上下文?可以找到很多信息?

可以看见state里面是存在一个全局数据sum,在mutation里面有两个加工操作,ADD和JIAN,单纯的加和减,在action才是实现了两个按钮的业务逻辑,

Vue3——vuex的使用——axios网络请求的使用

vuex中一个新的配置项getters

getters作用:根据state中的值计算新的值

应用场景:当我们显示当前的和的10倍时,或是需要需要做一些别的计算时,我们有很多种方法可以去实现,watch,computed….,但是当逻辑变的复杂且复用变多了就需要每一个组件里面都写,更麻烦了,这时候就可以用上getters

Vue3——vuex的使用——axios网络请求的使用

store中配置,getters中的函数是可以得到state作为参数的,里面的属性的值和comouted一样需要由返回值来确定。

Vue3——vuex的使用——axios网络请求的使用

组件里面就可以直接的调用store里面的getters中的bigsum获取数据,state和getters如同vue里面的data和comouted。

Vue3——vuex的使用——axios网络请求的使用

注意点:

1.在模板里面访问state不用加this,在js里面访问state则需要加this

Vue3——vuex的使用——axios网络请求的使用

Vue3——vuex的使用——axios网络请求的使用

2.在context里面,我们可以看见是可以访问到state的,里面也有sum,但是我们也不能直接在action里面的对state进行更改,因为这样做会使得开发者工具失效,开发者工具始终监视着mutation,活动不经过mutation而是直接修改state的话不方便开发者工具调试。

Vue3——vuex的使用——axios网络请求的使用

vuex代码优化

在上面的例子中,模板里面要用到数据都要家伙是哪个一连串的前缀,不符合模板语句要简洁的思想,想要直接用写sum和bigsum表示和以及大和需要用到一个新的配置项叫做maostate用来映射状态(数据)。

Vue3——vuex的使用——axios网络请求的使用

在comouted里面用到一个mapSteta的对象类型数据,这个是vuex已经封装好的一个东西,用之前需要先进行引入

Vue3——vuex的使用——axios网络请求的使用

对象写法

Vue3——vuex的使用——axios网络请求的使用

Vue3——vuex的使用——axios网络请求的使用

上面mapState是一个对象类型的数据,computed也是一个对象,一般是不能在一个对象里面写另一个对象数据的,但这里用到了es6的新语法,’…’,这三个点的作用就是把mapState里面的对应的key和value都放到computed里面,mapSteate会自动生成绑定数据

Vue3——vuex的使用——axios网络请求的使用

数组写法

Vue3——vuex的使用——axios网络请求的使用

Vue3——vuex的使用——axios网络请求的使用

以上就是使用mapState的方式

同理,从getters里面读数据也有一个专门的配置项叫做mapGetters,用法和上面的一模一样,这里不再过多赘述

Vue3——vuex的使用——axios网络请求的使用

Vue3——vuex的使用——axios网络请求的使用

既然state和gettters有优化,那么actions和mutations也会有优化

mutations和Actions代码优化

以求和的例子来讲,和上面的基本一样,需要设定方法名和找到store中的方法名,但是还有一个value需要传,这个就写到template里面。对象写法和数组写法推荐用对象写法,因为数组写法里的元素需要直接写store里面的参数名字

Vue3——vuex的使用——axios网络请求的使用

Vue3——vuex的使用——axios网络请求的使用

Vue3——vuex的使用——axios网络请求的使用

modules的使用(将来在开发中的地位其重要)

作用:定义state的子模块

需要有一个新东西叫做namespaced(命名空间),不同模块的共享数据由不同的modules组成,不同的子模块要专门开一个新的文件来放,这一块的视频因为过于繁杂,建议以后复习直接看视频吧

116_尚硅谷Vue技术_vuex模块化+namespace_2_哔哩哔哩_bilibili

Vue3——vuex的使用——axios网络请求的使用

另外,找到一个好东西axios网络请求

axios使用

Vue3——vuex的使用——axios网络请求的使用

store里面的配置,放在actions里面,每一次请求成功都会去调用放在mutations里面的ADD_PERSON方法添加一个新的对象

Vue3——vuex的使用——axios网络请求的使用

组件部分代码

两个按钮分别绑定不同的事件,一个是直接到mutation里找,一个是通过actions去网上找

Vue3——vuex的使用——axios网络请求的使用

最后效果如下:

Vue3——vuex的使用——axios网络请求的使用

用来接收网络请求的网址:

https://api.uixsj.cn/hitokoto/get?type=social

Original: https://blog.csdn.net/m0_62327332/article/details/128414256
Author: 北岭山脚鼠鼠
Title: Vue3——vuex的使用——axios网络请求的使用

原创文章受到原创版权保护。转载请注明出处:https://www.johngo689.com/777888/

转载文章受原作者版权保护。转载请注明原作者出处!

(0)

大家都在看

  • 手把手教python发送邮件

    使用python内置模块– smtplib和 email进行邮件发送。其中 smtplib模块负责发送邮件,而email模块负责构造邮件内容。 一、基本用法介绍: 1、smtpli…

    Python 2023年8月1日
    0106
  • 数据分析课程笔记(一)简介、jupyter和conda、matplotlib

    数据分析课程笔记 数据分析简介 * 数据分析流程 jupyter和conda的使用 * conda jupyter notebook matplotlib * 什么是matplot…

    Python 2023年9月8日
    087
  • 如何通过.exe文件控制一台电脑

    CVE-2022-21999漏洞 如何实现发送一个.exe文件偷偷控制他人的电脑?这个想法很刑的,所以我只是说明我的实现方式,具体操作建议仅用于hvv等专业领域,请勿以身试法。 首…

    Python 2023年9月5日
    084
  • R数据分析:用R建立预测模型

    预测模型在各个领域都越来越火,今天的分享和之前的临床预测模型背景上有些不同,但方法思路上都是一样的,多了解各个领域的方法应用,视野才不会被局限。 今天试图再用一个实例给到大家一个统…

    Python 2023年10月23日
    066
  • pytest单元测试框架——xdist

    分布式运行用例插件,pytest-xdist把测试用例按照cpu进程的个数去分配,电脑cpu是6核,那么我们最大的并发数就可以设置为6,也就是我们可以同时打开6个浏览器去运行我们的…

    Python 2023年9月15日
    057
  • python代码正方形_如何使用matplotlib使标记方格成为精确的正方形?

    首先,重要的是我要用散开而不是通过迭代点(补丁),因为我的真实数据有大量的数据点。问题是如何用散开找到合适的标记大小。在 我想通过以下例子实现:对于我的16个数据点中的每一个,图片…

    Python 2023年9月5日
    058
  • Python实验,用pygame做飞机大战游戏设计

    飞机大战游戏设计 摘 要:根据课程要求,以及面向对象程序设计的编程思想,在Windows操作系统环境下,运用PyCharm编译程序,以Python语言为开发语言,最终实现飞机大战游…

    Python 2023年9月17日
    068
  • windows+webhook+github自动化部署

    最近开发过程中使用,django开发的web后台部署在apache服务器中,由于每次部署都需要在github上拉取代码并重新启动apache,对我来说异常麻烦,加之对github …

    Python 2023年6月11日
    0145
  • .net core 中 WebApiClientCore的使用

    接口注册与选项 1 配置文件中配置HttpApiOptions选项 配置示例 "IUserApi": { "HttpHost": &quot…

    Python 2023年10月13日
    055
  • 俄罗斯方块+注释

    好的,以下是简易完整版Java的 源码加 : java import java.awt.Color; import java.awt.Graphics; import java.a…

    Python 2023年9月22日
    046
  • 让你的Python代码更加Pythonic

    刚开始学习Python的时候,我们就了解了python的编码风格要求,通过python终端方式输入 import this可以看到它的具体描述。 这就是著名的”pyth…

    Python 2023年6月11日
    091
  • 【星海随笔】pandas全总结

    import pandas as pd pandas总结 载入CSV文件,并展示 df = pd.read_csv(‘1ttdata.csv’) df 展示元数据 df.info(…

    Python 2023年8月20日
    089
  • MySQL_python

    目录 * – 数据库的本质 – MySQL – 重要的概念 – 注意 – 启动 – sql语句初始 &#82…

    Python 2023年8月15日
    061
  • pandas两个数据结构Series与DataFrame使用

    seires 对象 1.创建一个series对象 Series() 语法:s=pd.Series(data,index=index) 参数说明: data:表示数据,支持Pytho…

    Python 2023年8月7日
    048
  • 009 Django 应用和分布式路由

    应用和分布式路由 应用和分布式路由 创建应用 配置分布式路由 应用下的模板 假如我们现在要做的是一个很大的网站,这些网站里面有很多的分区,这么多的分区我们全部都放在同一个 view…

    Python 2023年6月12日
    082
  • python神奇时钟项目_怎么在Python项目中利用Pygame绘制一个时钟

    怎么在Python项目中利用Pygame绘制一个时钟 发布时间:2020-11-30 14:24:30 来源:亿速云 阅读:54 作者:Leah 怎么在Python项目中利用Pyg…

    Python 2023年9月25日
    051
亲爱的 Coder【最近整理,可免费获取】👉 最新必读书单  | 👏 面试题下载  | 🌎 免费的AI知识星球