vue学习91-105

vue的基本认知p91

在这里插入图片描述

创建一个空仓库p93

vue 路由 vuex版本
2 3 3
3 4 4
在这里插入图片描述
npm的vuex装包npm install vuex --save
vuex里有仓库,仓库放vuex核心代码,所有组件都能访问到

const store =new Vuex.Store()
//访问stored
this.$store

在这里插入图片描述

如何提供$访问vuex的数据p94

核心概念-state状态

  1. 提供数据
    在这里插入图片描述
  2. 如何使用
    (1)通过store直接访问
    在这里插入图片描述
    (2)通过辅助函数(简化)
    在这里插入图片描述

核心概念-mutations

目标:明确vuex同样可以遵循单向数据流,组件中不能直接修改仓库的数据
通过strict:true可以开启严格模式
//错误代码不会监测,监测需要成本,所以要开strict:true(上线时需要关闭)

核心概念-mutations(修改仓库数据) P95

  1. 定义mutations对象,对象中存放修改state的方法
    在这里插入图片描述
    第一个参数是当前store的state函属性
    在这里插入图片描述
    mutations不支持多个参数,有且只能有一个参数,如果需要多个,包装成一个对象
    修改仓库的数据不能用v-model,遵循单项数据流所以:value和@target要分开写
    字符串转数字前面加+号
    在这里插入图片描述

辅助函数:MapMutations P96

在这里插入图片描述
mapstate映射计算属性,mapmutations映射methods组件

核心概念-actionsP97

actions

一层一层套真麻烦

mutations的函数写action里面
action处理异步,不能直接处理state,需要commit mutation
actions是方法
context 上下文
context.commit(‘mutation名字’,额外参数)

辅助函数-mapactions

在这里插入图片描述
在这里插入图片描述

核心概念-getters

state派生状态要依赖state,会用到getters
(1)getter函数第一个参数是state
(2)getters函数必须要有返回值
getters的辅助函数是计算属性
在这里插入图片描述
mapmutations和mapactions都是映射方法
mapstate和mapgetters都是映射属性

核心概念-模块module(进阶语法)-模块创建P98

把store对象state拆了
在这里插入图片描述
在这里插入图片描述

核心概念-模块module(进阶语法)-访问模块中的state$mutationsP99

state部分

在这里插入图片描述
属性映射直接映射整个state分模块
在这里插入图片描述
所以直接子模块映射mapState(‘模块名’,[‘xxx’])比较好(前提是开namespace)
在这里插入图片描述

getters部分

访问模块名getters的 不能直接用.得到
在这里插入图片描述
必须改成这样,加上中括号
要改成这样

mudule部分

第一种直接来store调用比较难以维护,不建议用,必须打开命名空间才会挂载到子模块
在这里插入图片描述

actions部分

和mutations有差异的是第一种store直接调用的语法
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/668194.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

梁航影院影视混剪,手机影视教学+电脑影视教学

课程下载:https://download.csdn.net/download/m0_66047725/88804173 手机影视教学: 发布作品的时间及发布过程中注意的问题 剪辑思路 如何参与变现 十六比九视频制作教程 账号定位及思路提升 作品的垂直度以及如何选剧找剧 作品质量提升及案例实…

春节运维不打烊:一体化运维高效保障企业IT与机房环境

随着技术的不断发展和企业数字化转型的深入,IT运维已经成为企业运营不可或缺的一部分。尤其在春节期间,一体化运维管理系统以其独特的技术特性和卓越的功能,为企业的稳定运行提供了坚实保障,确保了节日的祥和与工作的连续高效。 一…

【爬虫实战】全过程详细讲解如何使用python获取抖音评论,包括二级评论

简介: 前两天,TaoTao发布了一篇关于“获取抖音评论”的文章。但是之前的那一篇包涵的代码呢仅仅只能获取一级评论。虽然说抖音的一级评论挺精彩的了,但是其实二级评论更加有意思,同时二级评论的数量是很多。所以二级评论是非常值…

Go语言Gin框架安全加固:全面解析SQL注入、XSS与CSRF的解决方案

前言 在使用 Gin 框架处理前端请求数据时,必须关注安全性问题,以防范常见的攻击。本文将探讨 Gin 框架中常见的安全问题,并提供相应的处理方法,以确保应用程序的稳健性和安全性。 处理前端请求数据时,确保应用程序的…

【智慧工业】东胜物联定位与跟踪解决方案,为方案商提供蓝牙网关、信标等物联网智能硬件设备

利用东胜物联的蓝牙网关我们的合作伙伴在德国的建筑工地成功实施了基于物联网蓝牙的员工出勤和跟踪管理解决方案,该解决方案简化了员工时间表并增强了工作流程,为经理和主管提供了更多时间来专注于项目洞察,并提高了员工的效率、绩效和生产力…

【Shell的运行原理以及Linux当中的权限问题】

Shell的运行原理以及Linux当中的权限问题 Shell的运行原理Linux当中的权限问题Linux权限的概念如何实现用户账号之间的切换如何仅提升当前指令的权限如何将普通用户添加到信任列表 Linux权限管理文件访问者的分类 (人)文件类型和访问权限 (事物属性)文件权限值的表示方法文件访…

解决EasyExcel写入数据时的Invalid char错误

在最近的一个项目开发过程中,需要将数据写入Excel中。理所当然的,笔者第一时间使用了EasyExcel作为读写Excel的第三方工具类。 然而在写入数据的时候,系统有时候会遇到类似如下的错误信息: 写入数据时候报错- Invalid char (:) f…

Bean 的六种作用域总结

什么是Bean的作用域? Bean的作用域指的是指 Bean 在 Spring 框架中的某种行为模式 ⽐如单例作⽤域: 表⽰ Bean 在整个 Spring 中只有⼀份, 它是全局共享的. 那么当其他⼈修改了这个值之 后, 那么另⼀个⼈读取到的就是被修改的值. SpringBootTest class DemoApplicationTests…

java入门、环境配置及其特点介绍

目录 一、java语言的重要特点 二、java开发工具包(JDK)及其环境配置 三、java入门代码 四、Java运行机制 五、java学习方法 一、java语言的重要特点 java是面向对象的Java是健壮性的。Java具有强类型机制、异常处理、垃圾的自动收集等特点java语言是跨…

前端登陆加密解决方案

项目背景 环食药烟草的数据下载模块中,需要判断用户在进行数据下载时是进行了登录操作,如果没有登录要跳转登陆页面,输入账号和密码进行登录。 使用场景 项目中需要前端书写登录页面,用户输入账号密码,前端获取到用…

JAVA——Stream流

1.Stream流的作用(流水线) 结合了Lambda表达式,简化集合、数组的操作; 2.Stream流的使用步骤 ①先得到一条Stream流(流水线),并将数据放上去; ②利用Stream流中的API进行各种操作…

典型数据结构的模板实现

栈和数组 1.使用类模板实现数组结构定长数组可变数组 2.使用类模板实现栈结构 在我们初步了解编写模板类后,应当做一下代码练习。这节我们就做一个编写代码的补充,方便大家继续学习模板类的嵌套。作为新手而言,建议大家先写一个具体类&#x…

iOS 后台任务总结

文章目录 首先Apple官方为我们准备了三类后台任务执行的场景:Background TasksBackground Downloading或者Uploading(后台下载或者上传)Background Long-Running Tasks 声明后台服务类型Playing and Recording Background AudioTracking the User’s LocationImplementing a Vo…

CVPR 2023: GeoLayoutLM Geometric Pre-Training for Visual Information Extraction

我们使用以下6个分类标准对本文的研究选题进行分析: 1. 预训练与微调: 预训练: 模型在未适应特定任务之前如何从大量的未标记数据中学习通用表示。GeoLayoutLM 侧重于“几何预训练”,其涉及设计明确教给模型词语和图像元素之间空间关系的任务。例如,预测相对位置、距离甚至…

protoc结合go完成protocol buffers协议的序列化与反序列化

下载protoc编译器 下载 https://github.com/protocolbuffers/protobuf/releases ps: 根据平台选择需要的编译器,这里选择windows 解压 加入环境变量 安装go专用protoc生成器 https://blog.csdn.net/qq_36940806/article/details/135017748?spm1001.2014.3001.…

QEMU搭建Linux-ARM系统

1、安装QEMU需要的nijia工具 在安装QEMU前需要安装nijia工具,使用ninja1.12会出现bug,更换官网1.11.1版本,就可以正常编译了 下载地址: https://github.com/ninja-build/ninja/releases 配置安装 hudahuawiat:~/workspace/QEMU/…

React 中实现拖拽功能-插件 react-beautiful-dnd

拖拽功能在平时开发中是很常见的,这篇文章主要使用react-beautiful-dnd插件实现此功能。 非常好用,附上GitHub地址:https://github.com/atlassian/react-beautiful-dnd 安装及引入 // 1.引入 # yarn yarn add react-beautiful-dnd# npm npm…

SDL库的下载与配置(Visual Studio )2024/2/4更新

一.SDL的下载 下载链接 二.SDL的环境配置 解压以后放在中文路径下 不会添加环境变量自行搜索&#xff08;比较简单网上教程很多&#xff09; 下面进行编译器的配置 复制这段内容 x64\SDL2main.lib x64\SDL2.lib将这段代码放进去运行一下 #include <SDL.h>int main(int…

MySQL 架构和性能优化

重点&#xff1a; 视图&#xff0c;函数&#xff0c;存储过程&#xff0c;触发器&#xff0c;事件&#xff08; 了解 &#xff09; 用户管理&#xff0c;密码管理 grant revoke 权限管理 MySQL 架构&#xff08; 了解 &#xff09; 存储引擎&#xff1a;MyISAM 和 InnoDB …

Vscode配置STM32开发环境(联合Keil MDK/IAR开发)

Vscode配置STM32开发环境&#xff08;替代Keil MDK/IAR&#xff09; 前言 使用了很长时间的Keil5 MDK&#xff0c;以及最近用了一段时间的IAR for ARM&#xff0c;总体来说体验都不是特别的好&#xff0c;Keil功能还行&#xff0c;也不卡顿&#xff0c;就是开发效率、界面样式…