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 手机影视教学: 发布作品的时间及发布过程中注意的问题 剪辑思路 如何参与变现 十六比九视频制作教程 账号定位及思路提升 作品的垂直度以及如何选剧找剧 作品质量提升及案例实…

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

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

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

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

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

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

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

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

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

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

前端登陆加密解决方案

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

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.…

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;就是开发效率、界面样式…

【蓝桥杯冲冲冲】[NOIP2001 普及组] 装箱问题

蓝桥杯备赛 | 洛谷做题打卡day26 文章目录 蓝桥杯备赛 | 洛谷做题打卡day26题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1 提示思路 题解代码我的一些话 [NOIP2001 普及组] 装箱问题 题目描述 有一个箱子容量为 V V V&#xff0c;同时有 n n n 个物品&#xff0c;每…

echarts使用之柱状图(一)

1 基本使用 核心配置主要是xAxis/yAxis/series <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><meta http-equi…

2018年苏州大学837复试机试C/C++

2018年苏州大学复试机试 要求 要求用C/C编程&#xff1b;对程序中必要的地方进行注释。上机规则 请在电脑桌面上新建一个文件夹文件夹名为考试姓名&#xff08;中文&#xff09;&#xff1b;考试完毕后&#xff0c;将所编写的文件放在上述文件中。 第一题&#xff08;20分&…

07、全文检索 -- Solr -- Solr 全文检索 之 为索引库添加中文分词器

目录 Solr 全文检索 之 为索引库添加中文分词器添加中文分词器1、添加中文分词器的 jar 包2、修改 managed-schema 配置文件什么是 fieldType 3、添加 停用词文档4、重启 solr5、添加【*_cn】动态字段&#xff0c;并为该字段设置中文分词器6、演示分词器的区别演示 text_cjk 这…

瑞_23种设计模式_建造者模式

文章目录 1 建造者模式&#xff08;Builder Pattern&#xff09;1.1 介绍1.2 概述1.3 创作者模式的结构 2 案例一2.1 需求2.2 代码实现 3 案例二3.1 需求3.2 代码实现 4 模式拓展 ★★★4.1 重构前4.2 重构后 5 总结5.1 建造者模式优缺点5.2 建造者模式使用场景5.3 建造者模式 …

scikit-learn 1.3.X 版本 bug - F1 分数计算错误

如果您正在使用 scikit-learn 1.3.X 版本&#xff0c;在使用 f1_score() 或 classification_report() 函数时&#xff0c;如果参数设置为 zero_division1.0 或 zero_divisionnp.nan&#xff0c;那么函数的输出结果可能会出错。错误的范围可能高达 100%&#xff0c;具体取决于数…

STM32单片机的C语言基础

C语言是单片机开发中的必备基础知识&#xff0c;本文列举了部分STM32学习中比较常见的一些C语言基础知识。 1 位操作 下面我们先讲解几种位操作符&#xff0c;然后讲解位操作使用技巧。C语言支持以下六种位操作&#xff1a; 下面&#xff0c;重点讲解一下位操作在单片机开发中…

通过servlet设计一个博客系统

博客系统 准备工作servlrt依赖mysql依赖jackson依赖 服务器和数据库的交互设计数据库/数据表封装DBUtil,实现建立连接和断开连接创建实体类bloguser 编写Dao类BlogDaoUserDao 前端和服务器的交互功能一:博客列表页约定格式后端代码前端代码 功能二:实现博客详情页约定格式后端代…