Vuex状态管理

1.什么是状态管理

在开发中,我们会让应用程序需要处理各种各样的数据,这些数据需要保存在我们应用程序中的某一个位置,对于这些数据的管理我们就 称之为是状态管理。

在Vue开发中,我们使用组件化的开发方式:

1.在组件中我们定义data或者在setup中返回使用的数据,这些数 据我们称之为state;
2.在模块template中我们可以使用这些数据,模块最终会被渲染成DOM,我们称之为View;
3.在模块中我们会产生一些行为事件,处理这些行为事件时,有可能 会修改state,这些行为事件我们称之为actions;

2 复杂的状态管理

JavaScript开发的应用程序,已经变得越来越复杂了.JavaScript需要管理的状态越来越多,越来越复杂:

这些状态包括服务器返回的数据、缓存数据、用户操作产生的数据等等;
也包括一些UI的状态,比如某些元素是否被选中,是否显示加载动效,当前分页;

然而,当我们有多个组件共享一个共同的状态时,就没有这么简单了:单向数据流的简洁性很容易被破坏:

多个视图依赖于同一状态;
来自不同视图的行为需要变更同一状态;

对于情景 1,一个可行的办法是将共享状态“提升”到共同的祖先组件上去,再通过 props 传递下来。然而在深层次的组件树结构中这么做的话,很快就会使得代码变得繁琐冗长。这会导致另一个问题:Prop 逐级透传问题。

通常情况下,当我们需要从父组件向子组件传递数据时,会使用 props。想象一下这样的结构:有一些多层级嵌套的组件,形成了一颗巨大的组件树,而某个深层的子组件需要一个较远的祖先组件中的部分数据。在这种情况下,如果仅使用 props 则必须将其沿着组件链逐级传递下去,这会非常麻烦

对于情景 2,我们经常发现自己会直接通过模板引用获取父/子实例,或者通过触发的事件尝试改变和同步多个状态的副本。但这些模式的健壮性都不甚理想,很容易就会导致代码难以维护。

而且管理不断变化的state本身是非常困难的:

* 状态之间相互会存在依赖,一个状态的变化会引起另一个状态的变化,View页面也有可能会引起状态的变化;
* 当应用程序复杂时,state在什么时候,因为什么原因而发生了变化,发生了怎么样的变化,会变得非常难以控制和追踪;

​ 一个更简单直接的解决方案是**抽取出组件间的共享状态,放在一个全局单例中来管理**。这样我们的组件树就变成了一个大的“视图”,而任何位置上的组件都可以访问其中的状态或触发动作。通过定义和隔离状态管理中的各个概念,并通过强制性的规则来维护视图和状态间的独立性,我们的代码边会变得更加结构化和易于维护、跟踪;这就是Vuex背后的基本思想.

 3.Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

vuex的工作流程就是:

(1)通过dispatch去提交一个actions,

(2) actions接收到这个事件之后,在actions中可以执行一些异步|同步操作,根据不同的情况去分发给不同的mutations,

(3)actions通过commit去触发mutations,

(4)mutations去更新state数据,state更新之后,就会通知vue进行渲染。

4.Vuex的使用

第一步: 安装vuex

# npm 安装
npm install vuex# yarn 安装
yarn add vuex

第二步: 在src目录下创建一个store目录,在该目录下创建index.js文件,用于创建Store对象

//用于创建Vuex的核心对象Store
//1.导入
import {createStore } from 'vuex'//2.创建Store对象
const store = createStore({
//state 用于存储数据
state(){return {count:1,}
},
//actions 用于响应组件中的事件
actions:{},
//mutations 用于操作数据
mutations:{}
});//3.暴露出store对象
export default store;

第三步: 在main.js 使用store对象

import store from './store';
app.use(store);

第四步: 在 Vue 组件中, 可以通过 `this.$store` 访问store实例

<template>
<h2>{{$store.state.count}}</h2>
</template><script>
export default {
name: 'App',
data() {
return {};
},
components: {
},
methods: {},
mounted() {
console.log(this.$store.state.count);
}
};
</script><style lang="css" scoped>
</style>

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

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

相关文章

【相机方案】智能驾驶的域控采用的“串行器和解串器”方案的总结(持续更新),SerDes,GMSL

SerDes是Serializer/Deserializer的缩写&#xff0c;即串行器和解串器。由于同轴线的传输延迟几乎可以忽略不计&#xff08;ns级别&#xff09;&#xff0c;相当于将原来只能短距离传输的高速并行信号(MIPI/I2C/CLK等)的传输距离延长&#xff0c;真正做到高带宽、低延迟、长距离…

蓝桥杯刷题--RDay5

清理水域--枚举 8.清理水域 - 蓝桥云课 (lanqiao.cn)https://www.lanqiao.cn/problems/2413/learning/?page1&first_category_id1&second_category_id3&tags2023 小蓝有一个n m大小的矩形水域&#xff0c;小蓝将这个水域划分为n行m列&#xff0c;行数从1…

【QT+QGIS跨平台编译】056:【pdal_kazhdan+Qt跨平台编译】(一套代码、一套框架,跨平台编译)

点击查看专栏目录 文章目录 一、pdal_kazhdan介绍二、pdal下载三、文件分析四、pro文件五、编译实践一、pdal_kazhdan介绍 pdal_kazhdan 是 PDAL(Point Data Abstraction Library)相关的 Kazhdan 算法的实现。PDAL 是一个用于处理和分析点云数据的开源库,而 Kazhdan 算法通常…

AI提速 OpenAI 新模型GPT-5今年上线?

这两天&#xff0c;有关OpenAI新模型 GPT-5的消息又多了起来。有知情人士称&#xff0c;OpenAI将在今年年中的某个时候发布GPT-5&#xff0c;很可能是在今年夏天期间。OpenAI CEO 萨姆奥特曼在一次播客采访中透露“GPT-5的智能水平得到提升”。 有趣的是&#xff0c;播客的主理…

Latex表格制作详细教程(table, tabular, multirow, multicolumn)

一、简单表格制作 Latex表格需要用到 table 和 tabular 环境。其中 table 环境里写表格的标题(caption&#xff09;、表格的位置之类的。 tabular 环境则是绘制表格的内容。一个简单的表格绘制代码如下所示&#xff1a; \documentclass{article}\begin{document}\begin{table…

三防平板定制服务:亿道信息与个性化生产的紧密结合

在当今数字化时代&#xff0c;个性化定制已经成为了市场的一大趋势&#xff0c;而三防平板定制服务作为其中的一部分&#xff0c;展现了数字化技术与个性化需求之间的紧密结合。这种服务是通过亿道信息所提供的技术支持&#xff0c;为用户提供了满足特定需求的定制化三防平板&a…

猫冻干可以每天吃吗?5大优选品牌脆弱肠胃闭眼入

近年来&#xff0c;冻干猫粮作为备受追捧的高品质猫粮&#xff0c;吸引了越来越多养猫人的关注&#xff0c;对于像我这样的养猫达人来说&#xff0c;早已尝试并认可了冻干喂养。但对于新手来说&#xff0c;他们可能会感到困惑&#xff1a;冻干到底是什么&#xff1f;猫冻干可以…

[大模型]大语言模型量化方法对比:GPTQ、GGUF、AWQ

在过去的一年里&#xff0c;大型语言模型(llm)有了飞速的发展&#xff0c;在本文中&#xff0c;我们将探讨几种(量化)的方式&#xff0c;除此以外&#xff0c;还会介绍分片及不同的保存和压缩策略。 说明&#xff1a;每次加载LLM示例后&#xff0c;建议清除缓存&#xff0c;以…

如何远程监控员工的电脑

如何远程监控员工的电脑 为什么要对员工使用电脑的行为进行监控呢&#xff1f;对企业来说是有其必要性的。其必要性主要体现以下4个方面。 1.数据安全与知识产权保护 防止数据泄露&#xff1a;企业内部往往存储着大量的敏感信息&#xff0c;如客户数据、财务资料、商业秘密、…

23linux 自定义shell文件系统

打印环境变量&#xff0c;把当前子进程所有环境变量打印出来 环境变量也是一张表&#xff08;指针数组以null结尾&#xff0c;最后条件不满足就退出了 &#xff09; 用子进程调用 结论1 当我们进行程序替换的时候 &#xff0c;子进程对应的环境变量&#xff08;子进程的环境变…

蓝桥杯第六届c++大学B组详解

前言&#xff1a; 看了很多博客以及视频讲解&#xff0c;感觉都不是很清楚&#xff0c;比较模棱两可&#xff0c;所以干脆自己一边想&#xff0c;一边写博客&#xff0c;也可帮助到其他人&#xff0c;都是根据自己的逻辑来尽量清楚简单的讲清楚题目&#xff0c;喜欢的不要吝啬三…

RISC-V/ARM mcu OpenOCD 调试架构解析

Risc-v/ARM mcu OpenOCD 调试架构解析 最近有使用到risc-v的单片机&#xff0c;所以了解了下risc-v单片机的编译与调试环境的搭建&#xff0c;面试时问到risc-v的调试可参看以下内容。 risc-v根据官方的推荐&#xff0c;调试器服务是选择OpenOCD&#xff0c;DopenOCD(开放片上…

ros小问题之rosdep update time out问题

在另外一篇ROS 2边学边练系列的文章里有写碰到这种问题的解决方法&#xff08;主要参考了其他博主的文章&#xff0c;只是针对ROS 2做了些修改调整&#xff09;&#xff0c;此处单拎出来方便查找。 在ROS 2中执行rosdep update时&#xff0c;报出如下错误&#xff1a; 其实原因…

Java设计模式:外观模式之优雅门面(九)

码到三十五 &#xff1a; 个人主页 心中有诗画&#xff0c;指尖舞代码&#xff0c;目光览世界&#xff0c;步履越千山&#xff0c;人间尽值得 ! 在软件工程中&#xff0c;设计模式是解决常见设计问题的经验总结&#xff0c;它为开发者提供了一种通用的、可复用的解决方案。外…

根证书和中间证书安装配置

下载根证书 根证书是建立信任链的基础。一旦客户端安装了根证书&#xff0c;它即可验证由该根证书签发的所有证书。这使得客户端可以信任与该根证书相关的所有服务器和应用程序&#xff0c;从而建立起一个完整的信任链。 如果您的业务用户通过浏览器访问您的Web业务&#xff…

鸿蒙TypeScript学习第10天:【String(字符串)】

1、TypeScript String&#xff08;字符串&#xff09; String 对象用于处理文本&#xff08;字符串&#xff09;。 语法 var txt new String("string"); 或者更简单方式&#xff1a; var txt "string"; 2、String 对象属性 下表列出了 String 对象支…

QA测试开发工程师面试题满分问答8: mysql数据库的索引定义、用途和使用场景

MySQL数据库索引是一种数据结构&#xff0c;用于提高数据库的查询效率。索引是基于表中的一个或多个列构建的&#xff0c;它们允许数据库系统快速定位和访问表中的特定数据&#xff0c;而无需扫描整个表。 索引的定义 在MySQL中&#xff0c;可以使用CREATE INDEX语句定义索引…

前端| 富文本显示不全的解决方法

背景 前置条件&#xff1a;编辑器wangEditor vue项目 在pc端进行了富文本操作&#xff0c; 将word内容复制到编辑器中&#xff0c; 进行发布&#xff0c; pc端正常&#xff0c; 在手机端展示的时候 显示不全 分析 根据h5端编辑器内容的数据展示&#xff0c; 看到有一些样式造…

OpenHarmony实战:轻量系统STM32F407芯片移植案例

介绍基于STM32F407IGT6芯片在拓维信息Niobe407开发板上移植OpenHarmony LiteOS-M轻量系统&#xff0c;提供交通、工业领域开发板解决方案。 移植架构采用Board与SoC分离方案&#xff0c;使用arm gcc工具链Newlib C库&#xff0c;实现了lwip、littlefs、hdf等子系统及组件的适配…

字符串...

String概述: java.lang.String类代表字符串,Java程序中的所有字符串文字(列如"abc")都为此类的对象. String name "我是一个小仙女"; String schoolName "天才程序员"; String的注意点 字符串的内容是不会发生改变的,它的对象在创建后不能…