vuex原理和下载

news2024/11/16 17:44:57

vuex:状态管理模式

  • vue全家桶:vue-cli(脚手架)、vue-router(路由管理器)、vuex(状态管理模式)

原理图示: 

原理描述:

  • vuex在vue组件外面进行组件状态的管理;
  • 管理的这些状态会被拦截;
  • 组件都可以去访问这些状态;
  • 因为状态会被拦截,所以当一个组件改了这个状态,其他的组件在使用这个状态时给被改变了,使用的是最新的状态;

举一个例子来说明:

比如我们会根据定位页面,定位城市来加载影院页面和电影页面的数据,当定位的城市变了,影院页面的数据会跟着定位的城市不同一样变了,电影页面上映的电影也会更新为定位城市的电影。

这就用到了vuex状态管理的知识了,一个组件去改变这个状态,其他组件使用这个状态,当状态改变,其他组件就会跟着变。

图示:


 下载vuex:(也可以不用这样下载,看下面)

npm i --save vuex

出现很多ERR错误,就用下面这个下载:

npm i --save vuex --legacy-peer-deps

下载完再src文件夹在创建一个store文件夹(名字自己起,官方是store),在store文件夹中创建一个index.js文件,文件中按照下面的代码搭建骨架:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({

})

 使用的时候在main.js文件中引入和初始化:(看有注释的代码,其他的是引入别的东西)

不按照上面的方式下载: 

如果刚开始你创建vue项目时,选择了下载vuex,你项目中就会多出一个 store文件夹,在src文件夹下,此时就不用再下载了。

vuex代码就在这个index.js文件里写。


访问状态:

通过this.$store来访问里面的状态

在<template>里面使用状态:

  • {{this.$store.state.cityName}} ;
  • 在{{}}里this省略,所以直接:{{$store.state.cityName}}

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

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

相关文章

引用的小细节内联函数

1.引用的细节 引用&#xff0c;简单来说就是“取别名”。既然是别名&#xff0c;那么引用就一定具有以下的特点 引用在定义时必须初始化。 就好比起别名起码得告诉别人是给谁起的别名吧 一个变量可以有多个引用 就好比一个人可以有多个别名。比如张某某&#xff0c;有两个外号…

智慧农业创造新兴业态,推动农业产业现代化步伐

农业是国民经济的基础&#xff0c;在国家经济发展中起着不可替代的作用&#xff0c;随着物联网、人工智能、信息技术的快速发展&#xff0c;农业逐渐走向智能化、现代化和自动化&#xff0c;智慧农业已经深入到农业生产的各个环节&#xff0c;成为了现代农业发展新的方向。 所谓…

JAVA12_08学习总结(CSS)

今日内容 1. frameset 框架集标签frameset框架集标签不能放在body中rows--划分页面为上下部分cols--划分页面为左右部分框架标签frame框架的名称name属性<frame src"#" name"#" />src后代表这个框架中打开的页面链接name后代表这个被打开页面的nam…

JavaScript -- 11. BOM及常用对象介绍

文章目录BOM对象1 BOM2 navigator3 location3.1 常用方法3.2 url各部分名称4 historyBOM对象 1 BOM 浏览器对象模型 BOM为我们提供了一组对象&#xff0c;通过这组对象可以完成对浏览器的各种操作 BOM对象&#xff1a; Window —— 代表浏览器窗口&#xff08;全局对象&…

哥斯拉连webshell需要配置(哥斯拉连接Webshell实践)

1. 哥斯拉连webshell需要配置环境 kali linux   docker+vulhub   nginx(1.19.6)+php(7.4.15) 2. 哥斯拉连webshell需要配置过程 2.1 vulhub镜像拉取 vulhub安装的话去官网上有安装教程   Vulhub - Docker-Compose file for vulnerability environment   安装好之后…

VUE基本认知

1&#xff1a;vue介绍 渐进式 JavaScript 框架&#xff08;有2个库&#xff0c;核心库和插件库&#xff0c;如果能用核心库解决的就是用核心库&#xff0c;核心库解决不了的&#xff0c;就使用插件库&#xff09; 渐&#xff1a;逐渐&#xff0c; 进&#xff1a;添加 作者: 尤…

原生数据湖体系

背景&#xff1a; 随着数据量的爆发式增长&#xff0c;数字化转型称为了整个IT行业的热点&#xff0c;数据也开始需要更深度的价值挖掘&#xff0c;因此需要确保数据中保留的原始信息不丢失&#xff0c;从而应对未来不断变化的需求。当前以oracle为代表的数据库中间件已经逐渐…

nginx详细配置负载均衡全过程以及宕机情况处理

一、准备 1.下载安装nginx服务器&#xff08;win10/Linux同样适用&#xff09; 2.两个以上服务的服务地址 二、详细步骤以及宕机情况处理 &#xff08;1&#xff09;编辑 nginx.conf 配置文件&#xff0c;该文件在conf文件夹下面。 轮询&#xff1a; upstream my_server …

【物理应用】超声场可视化仿真模拟【含GUI Matlab源码 1494期】

⛄一、简介&#xff08;附论文&#xff09; 通过对超声场理论的数学物理方法计算&#xff0c;分别对圆型和矩型换能器的声轴线上声压分布、轴方向横截面的声压的分布及声场的指向性的表达式作出推导和演算&#xff0c;并得出结论&#xff1b;以及研究脉冲波声场分布特性&#…

计算机组成大题分析(五)

常见x86汇编指令解释 例题&#xff1a;已知 f(n)n! nX(n-1)XX2X1&#xff0c;计算 f(n)的 C 语言函数 f(n) 的源程序&#xff08;圈住的地方&#xff09;及其在 32 位计算机 M 上的部分机器级代码如下: 其中&#xff0c;机器级代码行包括行号、虚拟地址、机器指令和汇编指令&am…

止损的意义是什么?我们为何要止损这个操作?

止损的意义是什么&#xff1f;我们为何要止损这个操作&#xff1f;我想很多人并没有深入思考这个问题&#xff0c;我猜测绝大数人都会说为了风险控制&#xff0c;无条件执行&#xff0c;割断亏损让利润奔跑&#xff0c;这类的话&#xff0c;其实不然。 我觉得一个操作如果内心…

什么是云计算中的多租户?

在云计算中&#xff0c;多租户意味着一个云供应商的多个客户使用相同的计算资源。即使他们共享资源&#xff0c;云客户也不知道彼此&#xff0c;他们的数据是分开的。多租户是云计算的重要组成部分&#xff0c;没有它&#xff0c;云服务将远不实用。 多租户的经典定义是为多个用…

12月8日(第八天)

DOCKER 参考文章&#xff1a; 十分钟学会用docker部署微服务 Docker 让开发者可以打包他们的应用以及依赖包到一个可移植的容器中&#xff0c;然后发布到任何流行的 Linux 机器上&#xff0c;便可以实现虚拟化。&#xff08;开始时觉得docker麻烦&#xff0c;我部署java应用&a…

Python+Requests实现接口自动化

一般对于自动化的理解&#xff0c;有两种方式的自动化。 第一&#xff0c;不需要写代码&#xff0c;完全由工具实现&#xff0c;这种方式的工具一般是公司自己研发的&#xff0c;方便黑盒测试人员使用。这种工具的特点是学习成本低&#xff0c;方便使用&#xff0c;但是通用性…

JSP SSH共享单车租赁系统myeclipse开发oracle数据库MVC模式java编程计算机网页设计

一、源码特点 JSP SSH共享单车租赁系统是一套完善的web设计系统&#xff08;系统采用ssh框架进行设计开发MVC模式&#xff09;&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要 采用B/S模式开发。开发环境为TO…

亚马逊云科技re:Invent:Serverless成技术新常态

2019年底&#xff0c;亚马逊云科技发布了Amazon Lambda的“预置并发&#xff08;Provisioned Concurrency&#xff09;”功能&#xff0c;它允许亚马逊云科技无服务器计算用户使其函数保持“已初始化并准备好在两位数毫秒内响应”的状态&#xff0c;这意味着“冷启动”问题成为…

xss-labs靶场练习部分记录

目录 靶场环境 测试使用 evel3 evel5 evel6 evel7 evel8 evel9 evel10 evel11 evel12 evel13 evel14 靶场环境 browser&#xff1a;firefox&#xff1b;plugin:Hackbar,tools:burp 注&#xff1a;常见payload在评论区 测试使用 " <> scRiPt oNeEro…

MySQL 的日志(undo log、redo log、binlog)

我们在MYSQL执行过程文章中知道一条SQL语句执行流程是怎么样的&#xff0c;但SQL语句是怎么入库的呢&#xff1f;如下图&#xff1a; SQL语句入库过程在图中涉及三个日志&#xff1a; undo log&#xff08;回滚日志&#xff09;、redo log&#xff08;重做日志&#xff09; 、b…

TI RM57 如何配置RTI作为定时器使用

引言 最近公司要对新项目的算法进行评估&#xff0c;这就需要拿到RM57浮点运算能力数据&#xff0c;测量运算速度就要用到高精度定时器&#xff0c;通过查看芯片手册发现RTI可以满足这个需求&#xff0c;本文对RTI的配置和使用做一个详细的记录&#xff0c;方便以后翻看。 ui…

Python的Socket编程

Python的Socket编程一、Socket简介二、Socket基本参数和函数介绍1. socket参数2.socket相关函数三、Python编写socket的步骤1.python编写server的步骤2.python编写client的步骤四、python socket变成实操1.server.py2.client.py3.socket更多功能五、案例1.TCP案例一&#xff1a…