vuex学习day02-state状态、严格模式(strict)、mutations、辅助函数mapMutations、actions

news2024/11/13 10:37:18

4、state状态

(1)作用:提供共享数据

(2)步骤:

        1)找到仓库,通过state提供共享数据

                        

报错1?:

解决方式:

找到.eslintrc.js文件,添加一行“indent”:[“off”,2]

报错2?:

解决措施:

用vscode打开.eslintrc.js文件,错误很明显

改正之后

2)访问(通过store直接访问或通过辅助函数访问)
①通过store直接访问

在模版中:

在js中

通过辅助函数访问:

②通过辅助函数mapState访问(简化代码)

mapState:把store中的数据自动映射到组件的计算属性中

步骤:
导入mapState

数组方式引入state,在computed中展开运算符映射(如果是多个,在数组中添加即可)

使用(类似于计算属性的使用)

效果:

5、严格模式(strict)

(1)作用:规范代码,进行错误提示

(2)示例:

Vuex遵循单项数据流,组件中不能直接修改仓库的数据

当在任意组件中修改数据,发现都可以(类似于没有进行子传父的操作,却成功修改了父组件的值),不便于维护

效果:

加strict之后:

效果:

(3)注:上线时要关掉严格模式,减少性能消耗

6、mutations

(1)修改state的数据步骤(state的数据修改只能通过mutations)

        1)定义mutations对象,对象中放入修改state的方法

        

        2)组件中提交mutations
                ①给需要修改state数据的地方添加方法

        ②提交mutations

(2)使用mutations修改state中出现的错误

        1)报错1(一个方法保存之后,中间原有空格消失):

       ​​​​​​​                

解决:

效果:

(3)mutations传参

1)语法
        ①在mutations中提供带参数的方法

        仅能有一个额外的参数,若要传递多个参数,可用数组或对象传递

②在需要的地方提交调用mutations方法

③效果

7、辅助函数mapMutations

(1)作用:提取mutations,将其映射到组件methods中

(2)步骤:

已知:

Mutations中有某个方法

1)在需要的地方导入mapMutations
2)在methods中展开映射

3)使用

效果:

8、actions

(1)作用:处理异步操作(mutations必须是同步的,不处理异步)

(2)步骤

已知:

        

        1)在actions中提供异步操作的方法

        

        2)在需要的组件内,通过(this.$store.dispath(‘异步方法名’,额外参数))调用方法

        

        结果:

        

        ​​​​​​​        ​​​​​​​

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

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

相关文章

【React】项目的目录结构全面指南

文章目录 一、React 项目的基本目录结构1. node_modules2. public3. src4. App.js5. index.js6. .gitignore7. package.json8. README.md 二、React 项目的高级目录结构1. api2. hooks3. pages4. redux5. utils 三、最佳实践 在开发一个 React 项目时,良好的目录结构…

Flink笔记整理(五)

Flink笔记整理(五) 文章目录 Flink笔记整理(五)七、处理函数(最底层最常用最灵活)7.1基本处理函数(ProcessFunction)处理函数的功能和使用ProcessFunction解析 7.2按键分区处理函数&…

【初阶数据结构】9.二叉树(4)

文章目录 5.二叉树算法题5.1 单值二叉树5.2 相同的树5.3 另一棵树的子树5.4 二叉树遍历5.5 二叉树的构建及遍历 6.二叉树选择题 5.二叉树算法题 5.1 单值二叉树 点击链接做题 代码: /*** Definition for a binary tree node.* struct TreeNode {* int val;* …

鱼哥好书分享活动第27期:看完这篇《云原生安全》了解云原生环境安全攻防实战技巧!

鱼哥好书分享活动第27期:看完这篇《云原生安全》了解云原生安全攻防实战技巧! 主要内容:读者对象:本书目录:了解更多:赠书抽奖规则: 当前全球数字化的发展逐步进入深水区,云计算模式已经广泛应用…

用 apifox cli 命令行运行本地接口出现TypeError:Invalid IP address: undefined

用 apifox cli 命令行运行本地接口出现TypeError:Invalid IP address: undefined,客户端运行是通过的但命令行运行会报错 修改端口也是一样报错,地址修改为127.0.0.1会报错connect ECONNREFUSED 127.0.0.1:8080 解决方法:不用localhost&…

视觉SLAM第一讲

第一讲-预备知识 SLAM是什么? SLAM(Simultaneous Localization and Mapping)是同时定位与地图构建。 它是指搭载特定传感器的主体,在没有环境先验信息的情况下,于运动过程中建立环境的模型,同时估计自己…

《Milvus Cloud向量数据库指南》——Milvus Cloud不同场景下的部署形态选型

不同场景下的部署形态选型 一般说选型肯定离不开阶段。用到向量数据库的应用基本有这么几个阶段: AI 应用的快速原型构建。比如你在做一个 AI 个人助手、一个小的搜索引擎原型、一个端到端的 RAG 原型,这类项目的迭代速度是很关键的,而且原型构建期不需要关心性能或者稳定性…

JVM 内存分析工具 Memory Analyzer Tool(MAT)入门(一)

一、打开 jvisualvm (VisualVM 是一款集成了 JDK 命令行工具和轻量级剖析功能的可视化工具。 设计用于开发和生产。) 打开 jvisualvm.exe 工具会出现如下一些监控指标 二、VisualVM可以根据需要安装不同的插件,每个插件的关注点都不同&#x…

街道宣传信息工作通讯稿怎样向新闻媒体投稿?

在街道单位从事信息宣传工作的初期,我深刻体会到了这份工作的艰辛与挑战。面对繁重的投稿任务和严苛的审核机制,传统的邮箱投稿方式如同一座难以逾越的大山,横亘在我与成功之间。每一篇精心撰写的通讯稿,都承载着对单位工作的热情与期待,却在漫长的等待与频繁的退稿中逐渐消磨了…

Java实现七大排序(二)

一.交换排序 1.冒泡排序 这个太经典了&#xff0c;每个学编程都绕不开的。原理跟选择排序差不多&#xff0c;不过冒泡排序是直接交换。 public static void bubbleSort(int[] array){for (int i 0; i < array.length - 1; i) {for (int j 0; j < array.length-1-i; j…

助力运动员突破数据障碍 英特尔助力巴黎奥运会构建RAG聊天机器人

随着现代科技的飞速发展&#xff0c;奥运会这样的大型体育赛事也迎来了前所未有的变革。从运动员训练到比赛直播&#xff0c;从裁判判罚到观众体验&#xff0c;科技的应用正深刻地影响着体育赛事的每一个环节。近日&#xff0c;英特尔就分享了与国际奥林匹克委员会&#xff08;…

Docker快速搭建WordPress博客系统网站

WordPress 是一款广泛使用的开源内容管理系统(CMS),用于创建和管理网站和博客。 主要功能: 易于使用的界面:WordPress 提供了一个直观的后台管理界面,使用户能够轻松创建、编辑和管理网站内容。 主题和模板:WordPress 提供了各种主题和模板,可根据网站需求进行选择和自…

OceanBase v4.2 特性解析:如何实现表级恢复

背景 在某些情况下&#xff0c;你可能会因为误操作而遇到表数据损坏或误删表的情况。为了能在事后将表数据恢复到某个特定时间点&#xff0c;在OceanBase尚未有表级恢复功能之前&#xff0c;你需要进行以下步骤&#xff1a; 利用OceanBase提供的物理恢复工具&#xff0c;您可…

进程概念(三)----- fork 初识

目录 前言1. pid && ppid2. forka. 为什么 fork 要给子进程返回 0&#xff0c; 给父进程返回子进程的 pid &#xff1f;b. 一个函数是如何做到两次的&#xff1f;c. fork 函数在干什么&#xff1f;d. 一个变量怎么做到拥有不同的内容的&#xff1f;e. 拓展&#xff1a;…

简单快捷!Yarn的安装与使用指南

Yarn 是由 Facebook (现 Meta) 开发的包管理工具。 今天&#xff0c;我将介绍如何使用 Yarn。 目录 Yarn 的官方网站 关于安装 版本确认 开始一个新项目&#xff08;创建 package.json 文件&#xff09; 安装软件包 升级包 运行脚本 执行包的命令 卸载包 总结 Yarn 的…

光伏+农业,会激发出怎样的火花?

在这个科技与自然和谐共生的时代&#xff0c;光伏技术与现代农业的深度融合&#xff0c;正悄然掀起一场绿色革命。当“光伏”这一代表未来能源方向的技术与承载着人类生存之本的“农业”相遇&#xff0c;两者之间的化学反应&#xff0c;不仅照亮了清洁能源的道路&#xff0c;更…

MP的使用

1、MP简介 MyBatis-Plus&#xff08;简称MP&#xff09;是一个MyBatis的增强工具&#xff0c;在MyBatis的基础上只做增强不做改变&#xff0c;为简化开发、提高效率而生 官网&#xff1a;MyBatis-Plus &#x1f680; 为简化开发而生 参考教程&#xff1a;https://baomidou.c…

【LeetCode 随笔】C++入门级,详细解答加注释,持续更新中。。。

文章目录 58.【简单】最后一个单词的长度&#x1f31f; &#x1f308;你好呀&#xff01;我是 山顶风景独好 &#x1f388;欢迎踏入我的博客世界&#xff0c;能与您在此邂逅&#xff0c;真是缘分使然&#xff01;&#x1f60a; &#x1f338;愿您在此停留的每一刻&#xff0c;都…

全网最详细!! Linux 安装、配置教程

一、下载安装包 首先去官网下载VMware最新版本&#xff0c;以及发行版CentOS -7&#xff0c;懒得下载的可以私信我&#xff0c;我给你发包 其中&#xff0c;CentOS&#xff08;Community Enterprise Operating System&#xff09;是一个基于Linux的开源操作系统&#xff0c;它是…

VBA技术资料MF181:图片导入Word后添加说明文字

我给VBA的定义&#xff1a;VBA是个人小型自动化处理的有效工具。利用好了&#xff0c;可以大大提高自己的工作效率&#xff0c;而且可以提高数据的准确度。“VBA语言専攻”提供的教程一共九套&#xff0c;分为初级、中级、高级三大部分&#xff0c;教程是对VBA的系统讲解&#…