Vue3之状态管理Vuex

Vuex作为Vue.js的官方状态管理库,在大型或复杂的前端项目中扮演着至关重要的角色。本文将从Vuex的原理、特点、应用场景等多个方面进行深入解析,并通过代码示例展示如何在Vuex中实现特定功能。

一、Vuex原理

Vuex是一个专为Vue.js应用程序开发的状态管理模式和库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex的核心概念包括state、getters、mutations、actions和modules,这些概念共同构成了一个完整的状态管理框架。

1.1 State(状态)

State是Vuex中的单一状态树,即用一个对象就包含了全部的应用层级状态。它是不可变的,只能通过提交mutations来修改。在Vue组件中,可以通过this.$store.state来访问状态。

1.2 Getters(获取器)

Getters可以认为是store的计算属性,就像组件中的计算属性一样,getters的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。通过getters,可以方便地派生出一些状态,或对数据进行进一步的处理。

1.3 Mutations(变更)

Mutations是Vuex中唯一可以修改state的方法。每个mutation都有一个字符串的事件类型(type)和一个回调函数(handler)。这个回调函数是实际进行状态更改的地方,并且它会接受state作为第一个参数。需要注意的是,mutation必须是同步函数。

1.4 Actions(动作)

Actions类似于mutations,但它们主要用于处理异步操作。Actions可以包含任意异步操作,并在操作完成后提交mutations来修改state。通过actions,我们可以进行异步操作或复杂逻辑的提交,然后调用mutation来变更状态。

1.5 Modules(模块)

当项目比较大时,状态会集中,从而导致项目臃肿。Vuex允许将store分割成模块(module)。每个模块拥有自己的state、mutation、action、getter,甚至是嵌套子模块。这使得状态管理更加模块化和清晰。

二、Vuex特点

Vuex作为Vue.js的状态管理库,具有以下显著特点:

2.1 集中式状态管理

Vuex将应用的状态集中存储在一个单一的状态树中。这样可以方便地管理和追踪状态的变化,避免了状态分散在多个组件中导致的混乱和难以维护的问题。

2.2 组件之间共享状态

在大型应用中,多个组件可能需要共享某些状态,例如用户登录状态、购物车数量等。Vuex提供了一个中央存储库,使得多个组件可以方便地访问和修改共享状态。

2.3 状态的可追踪和可维护性

Vuex使用了响应式的状态管理,当状态发生变化时,相关的组件会自动更新。同时,Vuex提供了一些工具来追踪状态的变化,例如通过插件可以记录每个mutation的变更历史。这样可以更好地追踪和调试状态的变化。

2.4 简化组件通信

在Vue.js中,组件之间的通信可以通过props和事件来实现。但是当应用变得复杂时,组件之间的通信会变得困难和混乱。Vuex提供了一种集中式的数据流模式,使得组件之间的通信更加直观和可控。

三、Vuex应用场景

Vuex适用于多种应用场景,特别是在大型或复杂的前端项目中,其优势更加明显。以下是一些常见的应用场景:

3.1 管理大型应用的状态

在大型应用中,状态管理变得非常复杂。使用Vuex可以集中管理应用的所有状态,使得状态管理和共享变得更加简单和一致。

3.2 方便的状态共享

当多个组件需要共享状态时,使用Vuex可以方便地实现状态共享。例如,用户登录状态、购物车数量等全局状态都可以通过Vuex进行集中管理。

3.3 调试工具支持

Vuex与Vue Devtools无缝集成,提供了强大的调试工具。开发者可以使用Vue Devtools来追踪状态的变化、查看状态的历史记录等,从而更方便地进行调试和问题排查。

3.4 异步操作处理

Vuex的actions支持异步操作,可以方便地处理异步数据请求。通过actions,我们可以在异步操作完成后提交mutations来修改state,从而实现异步状态管理。

3.5 模块化管理

当项目比较大时,状态会集中,从而导致项目臃肿。Vuex允许将store分割成模块(module),每个模块拥有自己的state、mutation、action、getter等。这使得状态管理更加模块化和清晰。

四、代码示例

下面通过一个具体的代码示例来展示如何在Vuex中实现特定功能。

4.1 示例背景

假设我们正在开发一个购物车应用,该应用包含商品列表、购物车和用户个人信息等多个组件。我们需要使用Vuex来管理这些组件之间的共享状态。

4.2 创建Vuex Store

首先,我们需要在Vuex中定义一个状态树来存储所有需要共享的状态,如商品列表、购物车和用户个人信息等。然后,在Vue组件中通过this.$store.statethis.$store.getters等方式访问这些状态。

// store/index.js
import { createStore } from 'vuex'export default createStore({state: {cart: [],  // 购物车商品列表userInfo: {  // 用户个人信息name: '',email: ''}},mutations: {// 添加商品到购物车ADD_TO_CART(state, product) {const existItem = state.cart.find(item => item.id === product.id)if (existItem) {existItem.quantity += 1} else {state.cart.push({ ...product, quantity: 1 })}},// 从购物车中移除商品REMOVE_FROM_CART(state, productId) {state.cart = state.cart.filter(item => item.id !== productId)},// 更新用户信息UPDATE_USER_INFO(state, payload) {state.userInfo = { ...state.userInfo, ...payload }}},actions: {// 异步操作:从服务器获取用户信息并更新到store中fetchUserInfo({ commit }) {// 假设这里有一个异步请求获取用户信息setTimeout(() => {const userInfo = {name: 'John Doe',email: 'john.doe@example.com'}commit('UPDATE_USER_INFO', userInfo)}, 1000)}},getters: {// 获取购物车中商品的总数量cartItemCount: state => {return state.cart.reduce((total, item) => total + item.quantity, 0)},// 获取购物车中商品的总价格cartTotalPrice: state => {return state.cart.reduce((total, item) => total + item.price * item.quantity, 0)}}
})

4.3 在Vue组件中使用Vuex

接下来,我们需要在Vue组件中通过this.$store.statethis.$store.gettersthis.$store.committhis.$store.dispatch等方式访问和修改状态。

4.3.1 商品列表组件

商品列表组件用于展示商品列表,并提供将商品添加到购物车的功能。

<!-- src/components/ProductList.vue -->
<template><div><h1>商品列表</h1><ul><li v-for="product in products" :key="product.id">{{ product.name }} - ¥{{ product.price }}<button @click="addToCart(product)">添加到购物车</button></li></ul></div>
</template><script>
export default {data() {return {products: [{ id: 1, name: '商品A', price: 100 },{ id: 2, name: '商品B', price: 200 },{ id: 3, name: '商品C', price: 300 }]}},methods: {addToCart(product) {this.$store.commit('ADD_TO_CART', product)}}
}
</script>

4.3.2 购物车组件

购物车组件用于展示购物车中的商品列表,并提供移除商品的功能。

<!-- src/components/Cart.vue -->
<template><div><h1>购物车</h1><ul><li v-for="item in cartItems" :key="item.id">{{ item.name }} - ¥{{ item.price }} × {{ item.quantity }}<button @click="removeFromCart(item.id)">移除</button></li></ul><p>总数量: {{ cartItemCount }}</p><p>总价格: ¥{{ cartTotalPrice.toFixed(2) }}</p></div>
</template><script>
export default {computed: {cartItems() {return this.$store.state.cart;},cartItemCount() {return this.$store.getters.cartItemCount;},cartTotalPrice() {return this.$store.getters.cartTotalPrice;}},methods: {removeFromCart(productId) {this.$store.commit('REMOVE_FROM_CART', productId);}}
}
</script>

4.4 用户信息组件

用户信息组件用于展示和更新用户个人信息。

<!-- src/components/UserInfo.vue -->
<template><div><h1>用户信息</h1><p>姓名: {{ userInfo.name }}</p><p>邮箱: {{ userInfo.email }}</p><button @click="fetchUserInfo">更新用户信息</button></div>
</template><script>
export default {computed: {userInfo() {return this.$store.state.userInfo;}},methods: {fetchUserInfo() {this.$store.dispatch('fetchUserInfo');}}
}
</script>

4.5 将Vuex Store注入到Vue应用中

最后,我们需要在Vue应用的入口文件中将Vuex Store注入到Vue实例中,这样我们就可以在所有的Vue组件中通过this.$store来访问和操作Store了。

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

4.6 说明

通过以上步骤,我们成功地在Vuex中实现了购物车应用的状态管理。我们定义了共享的状态树,创建了用于修改状态的mutations和用于异步操作的actions,还定义了方便获取状态的getters。然后,我们在Vue组件中通过this.$store来访问和修改这些状态,实现了组件之间的数据共享和通信。这种集中式状态管理的方式使得我们的应用更加易于维护和扩展。

五、总结

Vuex作为Vue.js的官方状态管理库,为大型或复杂前端项目提供了高效的解决方案。它通过集中式存储管理应用状态,确保状态变化可预测。Vuex的核心包括state、getters、mutations、actions和modules,分别负责状态存储、状态派生、状态修改、异步操作和模块化管理。其特点在于集中式状态管理、组件间状态共享、状态可追踪维护以及简化组件通信。在购物车应用实例中,我们展示了如何在Vuex中定义状态树、创建mutations和actions、定义getters,并在Vue组件中访问和修改状态,实现了组件间的数据共享和通信。Vuex的应用极大地提升了应用的维护性和扩展性,是Vue.js开发中不可或缺的工具。

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

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

相关文章

人工智能入门是先看西瓜书还是先看花书?

在人工智能入门时&#xff0c;关于先看《机器学习》&#xff08;西瓜书&#xff09;还是先看《深度学习》&#xff08;花书&#xff09;的问题&#xff0c;实际上取决于个人的学习目标和背景。 《机器学习》&#xff08;西瓜书&#xff09;由周志华教授撰写&#xff0c;是一本…

B 站数据库负责人赵月顺:助力海内外业务增长,百套 TiDB 的选型与运维实战

导读 B 站对 TiDB 的应用已相当广泛&#xff0c;被应用在了 包括视频观看、一键三连、发送弹幕、撰写评论、阅读漫画以及视频后端的存储等场景&#xff0c; 目前拥有近 100 套集群。 本文由 B 站数据库负责人赵月顺撰写&#xff0c; 详细介绍了 B 站面临业务增长选择 TiDB 的…

二九(vue2-05)、父子通信v-model、sync、ref、¥nextTick、自定义指令、具名插槽、作用域插槽、综合案例 - 商品列表

1. 进阶语法 1.1 v-model 简化代码 App.vue <template><!-- 11-src-下拉封装 --><div class"app"><!-- <BaseSelect :cityId"selectId" changeId"handleChangeId"></BaseSelect> --><!-- v-model 简化…

flask-admin+Flask-WTF 实现实现增删改查

背景&#xff1a; flask-adminflask-wtf在网上可以搜索到很多资料&#xff0c;但有价值的很少&#xff0c;或许是太简单&#xff0c;或者是很少人这么用&#xff0c;或者。。。&#xff0c;本文将作者近礼拜摸索到的一点经验分享出来&#xff0c;给自己做个记录。 材料&#…

Linux下基于最新稳定版ESP-IDF5.3.2开发esp32s3入门任务间的通讯-消息队列【入门四】

继续上一篇任务创建 【Linux下基于最新稳定版ESP-IDF5.3.2开发esp32s3入门任务间的通讯-信号量【入门三】-CSDN博客】 今天要实现消息队列进行任务的通讯 一、从上一篇信号量通讯demo拷贝一份重命名&#xff0c;还是之前的两个任务&#xff0c;重命名了。 xTaskCreatePinned…

workman服务端开发模式-应用开发-后端api推送修改二

需要修改两个地方&#xff0c;第一个是总控制里面的续token延时&#xff0c;第二个是操作日志记录 一、总控续token延时方法 在根目录下app文件夹下controller文件夹下Base.php中修改isLoginAuth方法&#xff0c;具体代码如下&#xff1a; <?php /*** 总控制* User: 龙哥…

ReactPress 1.6.0:重塑博客体验,引领内容创新

ReactPress 是一个基于Next.js的博客&CMS系统&#xff0c; Github项目地址&#xff1a;https://github.com/fecommunity/reactpress 欢迎Star。 体验地址&#xff1a;http://blog.gaoredu.com/ 今天&#xff0c;我们自豪地宣布ReactPress 1.6.0版本的正式发布&#xff0c;…

重拾设计模式--外观模式

文章目录 外观模式&#xff08;Facade Pattern&#xff09;概述定义 外观模式UML图作用 外观模式的结构C 代码示例1C代码示例2总结 外观模式&#xff08;Facade Pattern&#xff09;概述 定义 外观模式是一种结构型设计模式&#xff0c;它为子系统中的一组接口提供了一个统一…

接口测试Day03-postman断言关联

postman常用断言 注意&#xff1a;不需要手敲&#xff0c;点击自动生成 断言响应状态码 Status code&#xff1a;Code is 200 //断言响应状态码为 200 pm.test("Status code is 200", function () {pm.response.to.have.status(200); });pm: postman的实例 test() …

提升专业素养的实用指南

在当今竞争激烈的职场&#xff0c;仅仅拥有专业技能已经不足以立于不败之地。持续提升自身专业素养&#xff0c;才是保持竞争力、实现职业目标的关键。那么&#xff0c;如何才能有效地提升专业素养&#xff0c;在职业道路上走得更稳、更远呢&#xff1f;以下是一些实用性建议&a…

网上球鞋竞拍系统|Java|SSM|VUE| 前后端分离

【技术栈】 1⃣️&#xff1a;架构: B/S、MVC 2⃣️&#xff1a;系统环境&#xff1a;Windowsh/Mac 3⃣️&#xff1a;开发环境&#xff1a;IDEA、JDK1.8、Maven、Mysql5.7 4⃣️&#xff1a;技术栈&#xff1a;Java、Mysql、SSM、Mybatis-Plus、VUE、jquery,html 5⃣️数据库可…

tryhackme-Pre Security-Windows Fundamentals 3(Windows基础知识3)

任务1&#xff1a;Introduction&#xff08;介绍&#xff09; 我们将继续探索 Windows 操作系统。 总结前两个房间&#xff1a; 在 Windows Fundamentals 1 中&#xff0c;我们介绍了桌面、文件系统、用户帐户控制、控制面板、设置和任务管理器。在 Windows Fundamentals 2 中…

pdf转换文本:基于python的tesseract

电脑系统&#xff1a;win10专业版 不能访问需要魔法上网 安装tesseract 在GitHub上下载:tesseract下载地址 找到自己电脑版本下载 双击安装&#xff0c;一路next&#xff0c;除了这一步 第三个加号点开&#xff0c;把带Chinese的都勾选 安装完成后配置环境&#xff0c;Win …

国产云厂商数据库产品--思维导图

为了对比国产云厂商数据库产品&#xff0c;我查阅了各云厂商的官方介绍&#xff0c;墨天轮等平台的部分数据和文章&#xff0c;整理出了简易的思维导图。 会去整理&#xff0c;也是因为有点懵&#xff0c;比如说阿里的PolarDB数据库&#xff0c;看起来就是一个数据库&#xff…

MongoDB(下)

MongoDB 索引 MongoDB 索引有什么用? 和关系型数据库类似&#xff0c;MongoDB 中也有索引。索引的目的主要是用来提高查询效率&#xff0c;如果没有索引的话&#xff0c;MongoDB 必须执行 集合扫描 &#xff0c;即扫描集合中的每个文档&#xff0c;以选择与查询语句匹配的文…

Unity 3D饼状图效果

一. 效果展示 二.基础类 using System.Collections; using System.Collections.Generic; using UnityEngine;public class DrawCylinder : MonoBehaviour {// 网格渲染器MeshRenderer meshRenderer;// 网格过滤器MeshFilter meshFilter;// 用来存放顶点数据List<Vector3>…

吉利前端、AI面试

诸葛耘墒的在线视频面试 1、小程序端AI视频面试 虚拟人面试官提问 视频口述回答 1、最近的两份工作经历&#xff0c;以及上一份离职原因2、在过往的工作或生活中&#xff0c;需要学习掌握一项与工作有关的技能或兴趣爱好时&#xff0c;你会运用哪些方法和诀窍&#xff0c;投入…

基于容器的云原生,让业务更自由地翱翔云端

无论是要构建一个应用或开发一个更庞大的解决方案&#xff0c;在技术选型时&#xff0c;技术的开放性和可移植性已经成为很多企业优先考虑的问题之一。毕竟没人希望自己未来的发展方向和成长速度被自己若干年前选择使用的某项技术所限制或拖累。 那么当你的业务已经上云&#x…

S32K324 Stack异常分析及解决方案

文章目录 前言正向排查尝试反向排查问题原因分析问题解决处理总结前言 在项目开发过程中,在一次软件变更时,调整了task优先级之后导致应用层软件中的float数据经常性的变为NAN,导致应用层功能失效。本文记录下这个bug的分析及解决过程。 正向排查尝试 由于问题复现的概率…

28、基于springboot的房屋租赁系统

房屋是人类生活栖息的重要场所&#xff0c;随着城市中的流动人口的增多&#xff0c;人们对房屋租赁需求越来越高&#xff0c;为满足用户查询房屋、预约看房、房屋租赁的需求&#xff0c;特开发了本基于Spring Boot的房屋租赁系统。 本文重点阐述了房屋租赁系统的开发过程&…