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直接调用的语法
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

GNSS模块的惯导技术:引领定位科技的前沿

全球导航卫星系统(GNSS)模块的惯导技术是一项颇具前瞻性的科技,它结合了全球定位系统和惯性导航技术,为各个领域的定位需求提供了更为精准和可靠的解决方案。本文将深入探讨GNSS模块的惯导技术,以及它如何在多个领域中…

DATAX改造支持geometry类型数据同步

数据库使用postgresql安装了postgis插件存储了geometry空间数据,想使用datax做数据同步,但datax本身不支持geometry类型数据,如何改造呢? 1.首先下载已改造支持geometry类型的datax引擎,下载地址 https://download.c…

微信小程序之本地生活案例的实现

学习的最大理由是想摆脱平庸,早一天就多一份人生的精彩;迟一天就多一天平庸的困扰。各位小伙伴,如果您: 想系统/深入学习某技术知识点… 一个人摸索学习很难坚持,想组团高效学习… 想写博客但无从下手,急需…

关于《人工智能法案》你应该知道的真相

什么是《人工智能法案》 《人工智能法案》是欧盟的一项法规,旨在为人工智能引入一个共同的监管和法律框架,保障人类的安全、健康和基本权利,同时促进人工智能的创新和发展。该法案根据人工智能应用可能造成的风险,对其进行了不同…

AcWing算法学习笔记:动态规划(背包 + 线性dp + 区间dp + 计数dp + 状态压缩dp + 树形dp + 记忆化搜索)

动态规划 一、背包问题① 01背包朴素版② 01背包优化版③ 完全背包朴素版④ 完全背包消k版⑤ 完全背包消k优化版⑥ 多重背包朴素版⑦多重背包二进制优化版⑧ 分组背包朴素版⑨ 分组背包优化版 二、线性dp① 数字三角形② 最长上升子序列③ 最长上升子序列打印序列版④ 最长上升…

Pytest自动化测试详解

🍅 视频学习:文末有免费的配套视频可观看 🍅 关注公众号:互联网杂货铺,回复1 ,免费获取软件测试全套资料,资料在手,涨薪更快 为什么需要自动化测试? 自动化测试有很多优…

CSS 闪电按钮效果

<template><view class="const"><div class="voltage-button"><button>闪电按钮</button><svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox=&q…

02.04

1.信号 include "myhead.h" //定义信号处理函数 void handler(int signo) {if(signo SIGINT){printf("用户按下了ctrl c键&#xff0c;hello world\n");} }int main(int argc, const char *argv[]) {if(signal(SIGINT, handler) SIG_ERR){perror("…

vue前端+nodejs后端通信-简单demo

本文记录vue前端nodejs后端通讯最简单的方法&#xff0c;供广大网友最快速进入全栈开发。 技术架构 前端 vue axios 后端 nodejs express 一、前端部分-搭建VUE 项目 vue create Vnodenpm run serve 启动&#xff1b; 具体操作步骤&#xff0c;请自行百度&#xff0c;这里没…

【JavaEE spring】SpringBoot 统一功能处理

SpringBoot 统一功能处理 1. 拦截器1.1 拦截器快速⼊⻔1.2 拦截器详解1.2.1 拦截路径1.2.2 拦截器执⾏流程 1.3 登录校验1.3.1 定义拦截器1.3.2 注册配置拦截器 2. 统⼀数据返回格式2.1 快速⼊⻔2.2 存在问题2.3 案例代码修改2.4 优点 3. 统⼀异常处理 1. 拦截器 后端程序根据…

快递员的烦恼 - 华为OD统一考试

OD统一考试&#xff08;C卷&#xff09; 分值&#xff1a; 200分 题解&#xff1a; Java / Python / C 题目描述 快递公司每日早晨&#xff0c;给每位快递员推送需要淡到客户手中的快递以及路线信息&#xff0c;快递员自己又查找了一些客户与客户之间的路线距离信息&#xff0…

怎么把物品信息图片批量生成二维码?每张图片单独生码的制作技巧

现在通过扫码来查看人员或者物品信息的方式越来越常见&#xff0c;在合适的位置放置对应的二维码内容&#xff0c;让其他人通过扫码来获取图片信息。那么如果我们将每个信息做成一张图片后&#xff0c;需要将图片生成二维码时&#xff0c;有能够批量生成二维码的方法可以快速处…

【Mysql】整理

Mysql整理与总结 整理Mysql的基本内容供回顾。 参考&#xff1a; [1]. 掘金.MySQL三大日志(binlog,redolog,undolog)详解 [2]. Javaguide.MySQL三大日志(binlog、redo log和undo log)详解

2023-12蓝桥杯STEMA考试 C++ 中高级试卷解析

蓝桥杯STEMA考试 C++ 中高级试卷(12月) 一、选择题 第一题 定义字符串 string a = "Hello C++",下列选项可以获取到字符 C 的是(B)。 A、a[7] B、a[6] C、a[5] D、a[4] 第二题 下列选项中数值与其它项不同的是( C)。 A、 B、 C、 D、 第三题 定义变量 int i =…

幻兽帕鲁服务器自动重启备份-python

幻兽帕鲁服务器自动重启备份-python 1. 前置知识点2. 目录结构3. 代码内容4. 原理解释5. 额外备注 基于python编写的服务器全自动管理工具&#xff0c;能够实现自动定时备份存档&#xff0c;以及在检测到服务器崩溃之后自动重新启动&#xff0c;并且整合了对于frp端口转发工具的…

【高质量精品】2024美赛A题22页word版成品论文+数据+多版本前三问代码及代码讲解+前四问思路模型等(后续会更新)

一定要点击文末的卡片&#xff0c;进入后&#xff0c;即可获取完整资料后续参考论文!! 整体分析:这个题目是一个典型的生态系统建模问题&#xff0c;涉及到动物种群的性比例变化、资源可用性、环境因素、生态系统相互作用等多个方面。这个题目的难点在于如何建立一个合理的数学…

关于Clone

关于Clone 一般情况下&#xff0c;如果使用clone()方法&#xff0c;则需满足以下条件。 1、对任何对象o&#xff0c;都有o.clone() ! o。换言之&#xff0c;克隆对象与原型对象不是同一个对象。 2、对任何对象o&#xff0c;都有o.clone().getClass() o.getClass()。换言之&a…

实景三维技术未来的着力点应该在哪里?

随着社会经济和文化生活的不断发展&#xff0c;公共服务和公共安全就成为政府部门和各行业各部门的一个非常重要的工作&#xff0c;提高政府以及相关部门对紧急事件的快速反应和抗风险能力&#xff0c;建设应急指挥系统为公众提供更便捷的紧急救助服务&#xff0c;已经成为社会…

【GoLang入门教程】Go语言几种标准库介绍(五)

如何解决大模型的「幻觉」问题&#xff1f; 文章目录 如何解决大模型的「幻觉」问题&#xff1f;前言几种库image库 (常见图形格式的访问及生成)关键概念和类型&#xff1a;示例 IO库示例 math库(数学库)常用的函数和常量&#xff1a;示例 总结专栏集锦写在最后 前言 上一篇&a…

计算机毕业设计 | springboot 高校新生报到系统(附源码)

1&#xff0c;绪论 1.1 开发背景 学校新生报到仅仅靠原始的手工管理&#xff0c;面对大量的新生信息&#xff0c;无法有效率地将其中的重要部分提取出来&#xff0c;并做出相应的判断和处理。学校的决策只能依据报表数据&#xff0c;在浪费大量人力、物力的同时无法做到实时监…