Vue84-Vuex的工作原理与搭建开发环境

一、vuex工作原理 

  • stats:是一个object对象,里面有很多key-value,存放的就是要操作的数据。
  • mutations:是一个object对象,真正去操作stats的人。
  • actions的作用:是一个object对象,当一个动作对应的值需要发送ajax请求才能获取,则在actions中发送ajax请求。

实际上要操作的是,store提供的dispatch和commit函数。

当不需要发送ajax请求,也没有复杂的逻辑处理的时候,vuex允许不走actions,直接走multation。

目的:要让所有的组件实例对象都能看见store

二、搭建vuex的开发环境

2-1、vuex的引入和使用

在main.js中引入和使用vuex

注意:

想要vm身上有新的属性,要引入和使用,否则随便写的话,vue是不认的!

只要vm身上有store,此时,所有的组件实例对象vc和vm都能有store。

store身上要有三个对象:actions、mutations、states;

store身上要有两个接口:dispatch、commit。

2-2、创建store 

vue-cli的import问题:

即使import没有写在一起,vue-cli执行的时候也会把import汇总执行!

解决方式:

将vuex的引入和使用,放到store下的index.js文件中

 

三、小结

 

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

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

相关文章

【Spring Boot】关系映射开发(一):一对一映射

关系映射开发(一):一对一映射 1.认识实体间关系映射1.1 映射方向1.2 ORM 映射类型 2.实现 “一对一” 映射2.1 编写实体2.1.1 新建 Student 实体2.1.2 新建 Card 实体 2.2 编写 Repository 层2.2.1 编写 Student 实体的 Repository2.2.2 编写…

从涟漪到波浪:资产代币化的变革力量

原文标题:《From ripples to waves: The transformational power of tokenizing assets》撰文:Anutosh Banerjee,Matt Higginson,Julian Sevillano,Matt Higginson编译:Chris,Techub News本文来…

还是NC,项目代码开源|scRNA+bulkRNA+因子分析验证地塞米松治疗Covid19

说在前面 平时发文章的话,做药物用的大多都是仅仅是GEO的bulkRNA,有人的有鼠的,然后做做流水线分析,最后面PCR。今天看一篇发NC的工作量,怎么用转录组分析做药物的转化免疫学 这篇文章作者已经上传Github了&#xff…

LabVIEW自动探头外观检测

开发了一套基于LabVIEW的软件系统,结合视觉检测技术,实现探头及连接器外观的自动检测。通过使用高分辨率工业相机、光源和机械手臂,系统能够自动定位并检测探头表面的细微缺陷,如划痕、残胶、异色、杂物等。系统支持多种探头形态&…

【C++ OpenCV】机器视觉-二值图像和灰度图像的膨胀、腐蚀、开运算、闭运算

原图 结果图 //包含头文件 #include <opencv2/opencv.hpp>//命名空间 using namespace cv; using namespace std;//全局函数声明部分//我的腐蚀运算 Mat Erode(Mat src, Mat Mask, uint32_t x0, uint32_t y0) {uint32_t x 0, y 0;Mat dst(src.rows, src.cols, CV_8U…

如何在忘记密码的情况下重置Realme手机?

欢迎阅读我们关于如何在有或没有密码的情况下重置Realme手机的综合指南。无论您是忘记了密码&#xff0c;还是只是需要将设备恢复到出厂设置&#xff0c;我们都会为您提供所需的专业提示和技术专长。 发现分步说明、专家提示和行之有效的方法&#xff0c;轻松重新控制您的 Rea…

Hadoop3:集群压测-读写性能压测

一、准备工作 首先&#xff0c;我们要知道&#xff0c;平常所说的网速和文件大小的MB是什么关系。 100Mbps单位是bit&#xff1b;10M/s单位是byte ; 1byte8bit&#xff0c;100Mbps/812.5M/s。 测试 配置102、103、104虚拟机网速 102上用Python开启一个文件下载服务&#x…

Alpha2:使用深度强化学习挖掘公式化的超额收益因子(附论文及源代码)

原创文章第577篇&#xff0c;专注“AI量化投资、世界运行的规律、个人成长与财富自由"。 今天说说因子挖掘&#xff0c;我们之前交付的Deap遗传算法因子挖掘&#xff0c;大家可以前往温习一下&#xff1a; 源码发布Quantlab4.2&#xff0c;Deap因子挖掘|gplearn做不到的…

K8S学习教程(二):在 PetaExpress KubeSphere容器平台部署高可用 Redis 集群

前言 Redis 是在开发过程中经常用到的缓存中间件&#xff0c;为了考虑在生产环境中稳定性和高可用&#xff0c;Redis通常采用集群模式的部署方式。 在制定Redis集群的部署策略时&#xff0c;常规部署在虚拟机上的方式配置繁琐并且需要手动重启节点&#xff0c;相较之下&#…

十款绚丽的前端 CSS 菜单导航动画

CSS汉堡菜单是一种非常流行的PC端和移动端web菜单风格&#xff0c;特别是移动端&#xff0c;这种风格的菜单应用更为广泛。这款菜单便非常适合在手机App上使用&#xff0c;它的特点是当顶部菜单弹出时&#xff0c;页面内容将会配合菜单出现适当的联动&#xff0c;让整个页面变得…

关于linux捕捉鼠标事件的方法

网上找了很多方法&#xff0c;都比较杂乱。这篇文章专注于读取鼠标的动作&#xff1a;左键、右键、中键、滚轮。 linux的设备都以文件形式存放&#xff0c;要读取鼠标&#xff0c;有两种方法&#xff0c;一种是通过/dev/input/mice&#xff0c;一种是通过/dev/input/eventx (x…

探索线程安全:HashMap 的四种使用技巧

这篇文章&#xff0c;我们聊聊线程安全使用 HashMap 的四种技巧。 1 方法内部&#xff1a;每个线程使用单独的 HashMap 如下图&#xff0c;tomcat 接收到到请求后&#xff0c;依次调用控制器 Controller、服务层 Service 、数据库访问层的相关方法。 每次访问服务层方法 serv…

vue H5页面video 视频流自动播放, 解决ios不能自动播放问题

视频组件 <videostyle"width: 100%; height: 100%;object-fit: fill"class"player"refplayer_big_boxcontrolspreloadautoplay //自动播放muted //是否静音playsinline"true"x5-playsinline""webkit-playsinline"tru…

[Linux安全运维] Linux用户以及权限管理

Linux用户以及权限管理 Linux用户和组 用户信息文件pasawd /etc/passwd文件用于存储用户的信息 :用于分割不同的字段信息 字段示例&#xff08;第一行&#xff09;含义说明1root用户名2x密码占位符x代表用户有密码存储在shadow文件中无内容代表用户登录系统不需要密码30UID…

前端三件套开发模版——产品介绍页面

今天有空&#xff0c;使用前端三件套html、css、js制作了一个非常简单的产品制作页面&#xff0c;与大家分享&#xff0c;希望可以满足大家应急的需求。本页面可以对产品进行“抢购”、对产品进行介绍&#xff0c;同时可以安排一张产品的高清大图&#xff0c;我也加入了页面的背…

JAVA实现二分查找,斐波那契数列,深度优先搜索详情教程【包含代码】

本人详解 作者:王文峰,参加过 CSDN 2020年度博客之星,《Java王大师王天师》 公众号:JAVA开发王大师,专注于天道酬勤的 Java 开发问题中国国学、传统文化和代码爱好者的程序人生,期待你的关注和支持!本人外号:神秘小峯 山峯 转载说明:务必注明来源(注明:作者:王文峰…

Ubuntu查看opencv版本c++

✗命令行中直接输入&#xff1a; pkg-config --modversion opencv✔命令行中直接输入&#xff1a; pkg-config --modversion opencv4注解&#xff1a;附上在markdown中打勾&#xff0c;对号和打叉。使用时将&和#之间的空格去掉&#xff0c;这里只是为了不让CSDN自动转换才…

vue3单个页面进行防抖节流

防抖 <template><button id"submitButton" ref"submitButton">GET</button> </template><script lang"ts" setup> import { ref, onMounted } from vue;// 防抖函数 function debounce(func: () > void, dela…

小白尝试某程机票信息爬取

实训课需要机票数据集&#xff0c;网上没有&#xff0c;所以我选择爬取数据 此过程可谓经历的九九八十一难&#xff0c;也参考了不少大佬的文章&#xff0c;在此特别记录一下 弯路不多说&#xff0c;我直接讲成功的方法 找到请求url 通过控制台&#xff0c;最后确认下面的 …

基于Java中的SSM框架实现物流管理系统项目【项目源码+论文说明】

基于Java中的SSM框架实现物流管理系统演示 摘要 企业的发展离不开物流的运输&#xff0c;在一个大型的企业中&#xff0c;商品的生产和建设&#xff0c;推广只是前期的一些工作&#xff0c;在后期的商品销售和物流方面的建立&#xff0c;才能让一个企业得到大力的发展。 企业…