Vue 中的 Vuex:全面解析与使用教程

什么是 Vuex?

Vuex 是 Vue.js 官方提供的状态管理模式,专为 Vue.js 应用设计。它通过集中式存储管理应用中所有的组件状态,允许组件之间更方便地共享数据,并提供了一套规则来确保状态以可预测的方式发生变化。Vuex 对大型应用尤其有用,因为它将组件中的状态提取到外部,并通过全局状态管理器进行集中管理。

Vuex 提供了响应式的数据存储,与 Vue 组件深度集成,这意味着当状态发生变化时,所有依赖该状态的组件会自动更新。

为什么需要 Vuex?

在小型应用中,组件之间的状态可以通过父子组件通信或事件总线来管理。然而,当应用逐渐变大,组件间的状态变得复杂时,这种方法就显得笨拙且难以维护。这时,我们可以使用 Vuex 作为统一的状态管理工具,以确保整个应用状态的一致性和可预测性。

Vuex 的核心概念

Vuex 由以下几个核心部分组成:

  • State:状态,存储应用的全局数据。

  • Getters:计算属性,用于派生状态数据。

  • Mutations:同步操作,用于改变状态。

  • Actions:异步操作,用于处理业务逻辑,并通过提交 mutations 改变状态。

  • Modules:将状态和逻辑划分成多个模块,便于管理。

Vuex 的安装

首先,需要安装 vuex

npm install vuex --save
// src/store/index.js
import { createStore } from 'vuex';const store = createStore({state: {count: 0},mutations: {increment(state) {state.count++;}},actions: {incrementAsync({ commit }) {setTimeout(() => {commit('increment');}, 1000);}},getters: {doubleCount(state) {return state.count * 2;}}
});export default store;

main.js 中注册 Vuex

import { createApp } from 'vue';
import App from './App.vue';
import store from './store';const app = createApp(App);app.use(store);
app.mount('#app');

使用 Vuex 管理状态

1. State - 存储全局状态

State 是存储全局状态数据的地方,类似于组件中的 data。在组件中,我们可以通过 this.$store.state 来访问 Vuex 中的状态。

const store = createStore({state: {count: 0}
});

在组件中使用 state

<template><div><p>当前计数:{{ count }}</p></div>
</template><script>
export default {computed: {count() {return this.$store.state.count;}}
};
</script>

2. Mutations - 修改状态

Mutations 是用于修改 state 的方法,通常是同步的。我们通过 commit 函数来调用 mutations

const store = createStore({state: {count: 0},mutations: {increment(state) {state.count++;}}
});

在组件中调用 mutations 来修改状态:

<template><div><p>当前计数:{{ count }}</p><button @click="increment">增加计数</button></div>
</template><script>
export default {computed: {count() {return this.$store.state.count;}},methods: {increment() {this.$store.commit('increment');}}
};
</script>

3. Getters - 计算属性

Getters 类似于组件中的 computed,用于从 state 中派生数据。

const store = createStore({state: {count: 0},getters: {doubleCount(state) {return state.count * 2;}}
});

在组件中使用 getters

<template><div><p>计数的两倍:{{ doubleCount }}</p></div>
</template><script>
export default {computed: {doubleCount() {return this.$store.getters.doubleCount;}}
};
</script>

4. Actions - 异步操作

Actions 是用于处理异步操作的,通常用来提交 mutations。在组件中调用 actions 时,我们使用 dispatch 函数。

const store = createStore({state: {count: 0},mutations: {increment(state) {state.count++;}},actions: {incrementAsync({ commit }) {setTimeout(() => {commit('increment');}, 1000);}}
});

在组件中调用 actions

<template><div><p>当前计数:{{ count }}</p><button @click="incrementAsync">异步增加计数</button></div>
</template><script>
export default {computed: {count() {return this.$store.state.count;}},methods: {incrementAsync() {this.$store.dispatch('incrementAsync');}}
};
</script>

5. Modules - 模块化管理状态

当应用变得复杂时,可以将 store 划分为多个 module。每个模块有自己的 statemutationsactionsgetters,并且模块可以嵌套。

const moduleA = {state: () => ({ count: 0 }),mutations: {increment(state) {state.count++;}},getters: {doubleCount(state) {return state.count * 2;}}
};const store = createStore({modules: {a: moduleA}
});

在组件中访问模块的 stategetters

<template><div><p>模块A的计数:{{ count }}</p><p>计数的两倍:{{ doubleCount }}</p><button @click="increment">增加计数</button></div>
</template><script>
export default {computed: {count() {return this.$store.state.a.count;},doubleCount() {return this.$store.getters['a/doubleCount'];}},methods: {increment() {this.$store.commit('a/increment');}}
};
</script>

Vuex 开发者工具

Vuex 与 Vue Devtools 紧密集成,可以实时查看状态的变化、mutationsactions 的触发过程。这使得调试 Vuex 应用变得非常方便。

总结

Vuex 提供了一个强大的状态管理模式,尤其适合大型应用的开发。通过 state 来集中存储数据,通过 mutationsactions 来改变状态,通过 getters 来派生状态数据,并通过模块化管理使得应用的逻辑清晰易维护。在现代 Vue 应用中,Vuex 是一种非常有用的工具,能够帮助开发者轻松地管理复杂的状态。

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

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

相关文章

OPenCV结构分析与形状描述符(5)查找图像中的连通组件的函数connectedComponents()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 connectedComponents 函数计算布尔图像的连通组件标签图像。 该函数接受一个具有4或8连通性的二值图像&#xff0c;并返回 N&#xff0c;即标签…

如何处理Flask中的路由

在Flask框架中&#xff0c;路由是Web应用的核心组成部分之一&#xff0c;它定义了URL路径与视图函数之间的映射关系。当用户通过浏览器访问特定的URL时&#xff0c;Flask会根据定义的路由规则找到对应的视图函数&#xff0c;并调用该函数来处理请求&#xff0c;最后返回响应给客…

springboot3 集成elasticsearch(es)客户端(高亮查询)

集成依赖 <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>3.2.5</version><relativePath/> <!-- lookup parent from repository --></parent&…

Java 面试题:从源码理解 ThreadLocal 如何解决内存泄漏 ConcurrentHashMap 如何保证并发安全 --xunznux

文章目录 ThreadLocalThreadLocal 的基本原理ThreadLocal 的实现细节内存泄漏源码使用场景 ConcurrentHashMap 怎么实现线程安全的CAS初始化源码添加元素putVal方法 ThreadLocal ThreadLocal 是 Java 中的一种用于在多线程环境下存储线程局部变量的机制&#xff0c;它可以为每…

机器学习之 PCA降维

1.PCA 降维简介 主成分分析&#xff08;Principal Component Analysis, PCA&#xff09;是一种统计方法&#xff0c;用于在数据集中寻找一组线性组合的特征&#xff0c;这些特征被称为主成分。PCA 的目标是通过变换原始特征空间到新的特征空间&#xff0c;从而减少数据的维度&…

持久化分析

目录 介绍步骤WMI持久化分析注册表映像劫持IFEO持久化 介绍 1、WMI 的全称是 Windows Management Instrumentation&#xff0c;即 Windows 管理规范&#xff0c;在 Windows 操作系统中&#xff0c;随着 WMI 技术的引入并在之后随着时间的推移而过时&#xff0c;它作为一项功能…

Golang | Leetcode Golang题解之第387题字符串中的第一个唯一字符

题目&#xff1a; 题解&#xff1a; type pair struct {ch bytepos int }func firstUniqChar(s string) int {n : len(s)pos : [26]int{}for i : range pos[:] {pos[i] n}q : []pair{}for i : range s {ch : s[i] - aif pos[ch] n {pos[ch] iq append(q, pair{ch, i})} e…

用亚马逊云科技Graviton高性能/低耗能处理器构建AI向量数据库(上篇)

简介&#xff1a; 今天小李哥将介绍亚马逊推出的云平台4代高性能计算处理器Gravition&#xff0c;并利用该处理器构建生成式AI向量数据库。利用向量数据库&#xff0c;我们可以开发和构建多样化的生成式AI应用&#xff0c;如RAG知识库&#xff0c;特定领域知识的聊天机器人等。…

聚铭网络受邀成为ISC终端安全生态联盟首批成员单位

近日&#xff0c;在2024数博会这一行业盛会上&#xff0c;全国首个专注于终端能力的联盟——ISC终端安全生态联盟正式成立&#xff0c;聚铭网络受邀成为该联盟的首批成员单位之一。 ISC终端安全生态联盟由360集团发起&#xff0c;并联合20余家业内领先企业共同创立。联盟旨在通…

Rk3588 Android12 AIDL 开发

AIDL (Android Interface Definition Language) 和 HIDL (HAL Interface Definition Language) 都是 Android 系统中用于定义接口的工具&#xff0c;但它们有不同的用途和特性。 AIDL (Android Interface Definition Language) 用途&#xff1a; 主要用于应用程序之间的进程间…

记录|单例模式小记

目录 前言一、单例模式1.1 什么是单例模式1.2 常见单例模式 二、单例模式对比更新时间 前言 参考文章&#xff1a; 去读队友写的代码的时候由于看不懂才去学习的。 一般情况下&#xff0c;这种是用于数据库的开销避免。 例如&#xff1a; public class DBConnectionManager{pri…

Windows键盘快捷方式

键盘快捷方式是两个或多个键的组合&#xff0c;可用于执行通常需要鼠标或其他指针设备才能执行的任务。 使用键盘快捷方式你可以更轻松地与电脑进行交互&#xff0c;从而在使用 Windows 和其他应用时节省时间和精力。 大多数应用还提供加速键&#xff0c;以让你能够更轻松地使…

大数据-120 - Flink Window 窗口机制-滑动时间窗口、会话窗口-基于时间驱动基于事件驱动

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; 目前已经更新到了&#xff1a; Hadoop&#xff08;已更完&#xff09;HDFS&#xff08;已更完&#xff09;MapReduce&#xff08;已更完&am…

自定义 SpringBoot Starter

文章目录 一、自定义 starter1.1 创建 maven 项目1.2 创建邮件配置属性类1.3 创建模拟邮件发送服务类1.4 创建自动配置类1.5 spring.factories 相关配置1.6 打包成依赖 二、测试项目2.1 创建项目2.2 application.yml 配置2.3 测试应用 参考资料 本文源码位于 java-demos/spring…

Restful风格接口开发

一、项目搭建 安装nestjs脚手架 // 安装nestjs脚手架 npm i nestjs/cli// 新建 nest new [名字]//选择要用的工具 npm / yarn / pnpm 文件信息&#xff1a; 【main.ts】&#xff1a; 入口文件&#xff0c;通过NestFactory&#xff08;由nestjs/core库抛出的对象&#x…

微信小程序手写签名

微信小程序手写签名组件 该组件基于signature_pad封装&#xff0c;signature_pad本身是web端的插件&#xff0c;此处将插件代码修改为小程序端可用。 signature_pad.js /*!* Signature Pad v5.0.3 | https://github.com/szimek/signature_pad* (c) 2024 Szymon Nowak | Releas…

九盾叉车U型区域警示灯,高效照明和安全警示

叉车运作的环境比较复杂&#xff0c;在方便人们物流运输的同时也存在着很大的安全隐患&#xff0c;特别是叉车碰撞人的事故发生率很高&#xff0c;那我们该怎么在减少成本的同时又能避免碰撞事故的发生呢&#xff1f; 九盾叉车U型区域警示灯&#xff0c;仅需一盏灯安装在叉车尾…

快速回顾-HTML5

HTML5-常用的标签&#xff1a;https://blog.csdn.net/TKOP_/article/details/111395865 <!-- HTML5:声明文档类型的标签 --> <!DOCTYPE html><!-- 用于声明网页的主要语言为简体中文 --> <!-- 帮助搜索引擎、浏览器等理解网页的语言内容&#xff0c;以便…

十一 面向对象技术(考点篇)试题

A &#xff1b;D&#xff0c;D。实际答案&#xff1a;C&#xff1b;D&#xff0c;D 考的很偏了。UML 2.0基础结构的设计目标是定义一个元语言的核心 UML 2.0 【InfrastructureLibrary】,通过对此核心的复用&#xff0c;除了可以定义一个自展的UML元模型&#xff0c;也可以 Infr…

基于IP子网的VLAN典型配置举例(H3C,其他厂商同理)

基于IP子网的VLAN典型配置举例 1. 组网需求 如下图所示&#xff0c;办公区的主机属于不同的网段192.168.5.0/24和192.168.50.0/24&#xff0c;Device C在收到来自办公区主机的报文时&#xff0c;根据报文的源IP地址&#xff0c;使来自不同网段主机的报文分别在指定的VLAN中传…