【vue教程】六. Vue 的状态管理

目录

    • 往期列表
    • 本章涵盖知识点
    • 回顾
    • Vuex 的基本概念
      • 什么是 Vuex?
      • 为什么需要 Vuex?
    • Vuex 的核心概念
      • state
      • getters
      • mutations
      • actions
      • modules
    • Vuex 的安装和基本使用
      • 安装 Vuex
      • 创建 store
      • 在 Vue 应用中使用 store
      • 在组件中访问和修改状态
    • Vuex 的模块化
      • 模块化的好处
      • 创建模块
    • Vuex 的持久化
      • 持久化的好处
      • 实现持久化
    • Vuex 辅助函数
      • mapState
      • mapGetters
      • mapActions
      • mapMutations
      • 创建一个带有模块化和持久化的计数器应用
    • 结语
    • 互动交流

往期列表

  • 【vue教程】一. 环境搭建与代码规范配置
  • 【vue教程】二. Vue特性原理详解
  • 【vue教程】三. 组件复用和通信(7 种方式)
  • 【vue教程】四. Vue 计算属性和侦听器
  • 【vue教程】五. Vue 的路由管理

本章涵盖知识点

  • Vuex 的核心概念:state、getters、mutations、actions
  • Vuex 在大型应用中的作用
  • Vuex 的安装和基本使用
  • Vuex 的模块化和持久化

回顾

在第五站,我们深入学习了 Vue Router,理解了如何通过动态路由和嵌套路由来构建复杂的页面导航结构,并探讨了路由守卫在权限管理中的应用。
在这里插入图片描述

正文开始如果觉得文章对您有帮助,请帮我三连+订阅,谢谢💖💖💖


Vuex 的基本概念

什么是 Vuex?

借鉴了 Flux、Redux 和 The Elm Architecture。与其他模式不同的是,Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式和库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
状态自管理应用包含以下几个部分:

  • 状态,驱动应用的数据源;
  • 视图,以声明方式将状态映射到视图;
  • 操作,响应在视图上的用户输入导致的状态变化。

以下是一个表示“单向数据流”理念的简单示意:

flow.png

Vuex 在 Vue 组件中的流程图

vuex.png

为什么需要 Vuex?

随着应用的复杂性增加,我们需要一种更结构化的方式来管理状态,Vuex 通过集中管理状态、严格的流程变更和日志记录,使得状态管理变得简单、可预测和可维护。

Vuex 的核心概念

state

存储在 Vuex 中的状态,可以被 Vue 组件读取

getters

可以认为是 state 的计算属性,允许组件以更复杂的方式读取 state。

mutations

更改 Vuex 中状态的唯一方法是提交 mutation,它们是同步的事务

actions

类似于 mutations,但它们可以包含异步操作

modules

当应用变得复杂时,可以使用模块来将 store 分割成多个小的子 store。

Vuex 的安装和基本使用

安装 Vuex

首先,需要安装 Vuex 库:

npm install vuex --save

创建 store

创建一个新的 Vuex store:

import Vue from "vue";
import Vuex from "vuex";Vue.use(Vuex);const store = new Vuex.Store({state: {count: 0,},getters: {doubleCount: (state) => state.count * 2,},mutations: {increment: (state) => state.count++,},actions: {incrementAsync({ commit }) {setTimeout(() => {commit("increment");}, 1000);},},
});

在 Vue 应用中使用 store

在 main.js 中,将 store 实例注入到 Vue 中:

new Vue({store,render: (h) => h(App),
}).$mount("#app");

在组件中访问和修改状态

// 读取状态
computed: {doubleCount() {return this.$store.state.count * 2;}
},// 提交mutation
methods: {increment() {this.$store.commit('increment');}
},// 分发actionincrementAsync() {this.$store.dispatch('incrementAsync');}
}

Vuex 的模块化

模块化的好处

  • 组织代码:大型应用中状态管理的逻辑可以分散到不同的文件中。
  • 命名空间:模块的 getters、actions 和 mutations 可以自动拥有命名空间。

创建模块

const moduleA = {namespaced: true,state: { ... },getters: { ... },mutations: { ... },actions: { ... }
};const store = new Vuex.Store({modules: {a: moduleA}
});

Vuex 的持久化

持久化的好处

  • 状态恢复:在应用重新加载时恢复状态。
  • 调试:在开发过程中可以查看状态变化的历史。

实现持久化

使用localStorage或第三方库如vuex-persistedstate来实现:

npm install vuex-persistedstate
import createPersistedState from "vuex-persistedstate";const store = new Vuex.Store({state: {count: 0,},plugins: [createPersistedState({key: "vuex",paths: ["count"],}),],
});

Vuex 辅助函数

Vuex 提供了几个辅助函数,可以帮助我们更方便地在组件中使用 store 中的状态和函数。

mapState

mapState函数允许你将 store 中的 state 映射到组件的计算属性中。

import { mapState } from "vuex";export default {computed: {...mapState([// 映射 this.count 为 store.state.count"count",]),// 也可以使用对象展开运算符...mapState({// 映射 this.doubleCount 为 store.state.count * 2doubleCount: (state) => state.count * 2,}),},
};

mapGetters

mapGetters函数与mapState类似,但它用于映射 getters。

import { mapGetters } from "vuex";export default {computed: {...mapGetters([// 映射 this.doneCount 为 store.getters.doneTodosCount"doneCount",]),},
};

mapActions

mapActions函数允许你将 actions 映射为组件的方法。

import { mapActions } from "vuex";export default {methods: {...mapActions([// 映射 this.increment() 为 store.dispatch('increment')"increment",]),// 也可以使用对象展开运算符...mapActions({// 映射 this.incrementIfOdd 为 store.dispatch('incrementIfOdd')incrementIfOdd: "incrementIfOdd",}),},
};

mapMutations

mapMutations函数允许你将 mutations 映射为组件的方法。

import { mapMutations } from "vuex";export default {methods: {...mapMutations([// 映射 this.increment() 为 store.commit('increment')"increment",]),// 也可以使用对象展开运算符...mapMutations({// 映射 this.setCount 为 store.commit('setCount')setCount: "setCount",}),},
};

创建一个带有模块化和持久化的计数器应用

  1. 创建模块化的 store

    store.js

    const moduleA = {namespaced: true,state: { count: 0 },mutations: {increment(state) {state.count++;},},
    };const store = new Vuex.Store({modules: { a: moduleA },plugins: [createPersistedState()],
    });
    
  2. 在 Vue 实例中使用 store

    main.js

    new Vue({store,render: (h) => h(App),
    }).$mount("#app");
    
  3. 在组件中访问模块化状态

    <!-- Component.vue -->
    <template><p>{{ aCount }}</p><button @click="incrementA">Increment Module A</button>
    </template><script>export default {computed: {aCount() {return this.$store.state.a.count;},},methods: {incrementA() {this.$store.commit("a/increment");},},};
    </script>
    

结语

在本站的 Vue 探索之旅中,我们学习了 Vuex 的核心概念、模块化和持久化。通过模块化,我们可以更好地组织大型应用的状态管理逻辑;通过持久化,我们可以在应用重新加载时恢复状态。这些工具和概念将帮助我们构建更加健壮和可维护的 Vue 应用。

互动交流

欢迎在文章下方留言,分享学习 Vuex 状态管理的心得体会,或提出在学习过程中遇到的问题。我们将在后续的文章中提供解答和指导。


注意:本文内容会根据 Vue.js 和 Vuex 的最新版本进行更新,确保提供的信息是最新的。同时,为了提高文章的可读性,我们使用了清晰的代码块和图表。希望本文能够帮助你深入理解 Vue 的状态管理,并为你的 Vue 学习之旅添砖加瓦。

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

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

相关文章

2024新型数字政府综合解决方案(七)

新型数字政府综合解决方案通过集成人工智能、大数据、区块链和云计算技术&#xff0c;创建了一个高度智能化和互联互通的政府服务平台&#xff0c;旨在全面提升行政效率、服务质量和透明度。该平台实现了跨部门的数据整合与实时共享&#xff0c;利用人工智能进行智能决策支持和…

PCRNet: Point Cloud Registration Network using PointNet Encoding 论文解读

目录 一、导言 二、先导知识 1、Frobenius范数 三、相关工作 1、点云配准工作 2、PointNet 3、基于深度学习的点云配准 四、PCRNet 1、PCRNet 2、Iterative PCRNet 3、损失函数 五、实验 一、导言 本论文收录于CVPR2019&#xff0c;本论文提出了一种依赖PointNet网…

11.2.0.4 RAC 节点1重做操作系统后如何复原

环境描述&#xff1a;Redhat7.9 11.2.0.4 RAC 双节点 实验背景 群里有大佬在交流RAC中1个节点操作系统坏了如何修复&#xff0c;故有了该实验。 在正常的生产环境当中&#xff0c;有时候会遇到主机磁盘以及其他硬件故障导致主机OS系统无法启动&#xff0c;或者OS系统本身故障…

【海奇HC-RTOS平台E100-问题点】

海奇HC-RTOS平台E100-问题点 ■ btn 没有添加到group中 &#xff0c;怎么实现的事件的■ 屏幕是1280*720, UI是1024*600,是否修改UI■ hc15xx-db-e100-v10-hcdemo.dtb 找不到■ 触摸屏驱动 能否给个实例■ 按键驱动■ __initcall(projector_auto_start)■ source insigt4.0 #if…

【esp32程序编译提示undefined reference to ‘xxxx‘】

案例1&#xff1a; 【背景】 在使用SquareLine Studio设计UI时&#xff0c;成功导出UI代码&#xff0c;在编译代码的时候提示undefined reference to ‘ui_img_1869164015’&#xff0c;有一个变量无法识别&#xff0c;没有定义。 【定位步骤】 1.首先找到用这个变量的.c文件…

复现DOM型XSS攻击(1-8关)

目录 第一关&#xff1a;​ 分析代码&#xff1a; 第二关&#xff1a; 分析代码&#xff1a; 第三关&#xff1a; 分析代码&#xff1a; 第四关&#xff1a; 分析代码&#xff1a; 第五关&#xff1a; 分析代码&#xff1a; 第六关&#xff1a; 分析代码&#xff1…

SpringBoot依赖之Spring Data Redis 一 List 类型

概念 Spring Data Redis (AccessDriver) 依赖名称: Spring Data Redis (AccessDriver)功能描述: Advanced and thread-safe Java Redis client for synchronous, asynchronous, and reactive usage. Supports Cluster, Sentinel, Pipelining, Auto-Reconnect, Codecs and muc…

Spring源码-源码层面讲解bean标签添加了lookup-method和replaced-method标签之后源码执行流程,以及对象实例化的流程

bean.xml文件添加lookup-method和replaced-method标签 <?xml version"1.0" encoding"UTF-8"?> <beans xmlns"http://www.springframework.org/schema/beans"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:sch…

C语言部分内存函数详解

C语言部分内存函数详解 前言1.memcpy1.1基本用法1.2注意事项**目标空间与原空间不能重叠****目标空间原数据会被覆盖****目标空间要够大****拷贝字节数需小于原空间大小** 1.3模拟实现 2.memmove2.1基本用法2.2注意事项2.3模拟实现 3.memset3.1基本用法 4.memcmp4.1基本用法4.2…

[论文笔记]ZeRO: Memory Optimizations Toward Training Trillion Parameter Models

引言 今天带来ZeRO: Memory Optimizations Toward Training Trillion Parameter Models的论文笔记。 大型深度模型提供了显著的准确性提升&#xff0c;但训练数十亿到数万亿个参数是具有挑战性的。现有的解决方案&#xff0c;如数据并行和模型并行&#xff0c;存在基本的局限…

python小游戏之摇骰子猜大小

最近学习Python的随机数&#xff0c;逻辑判断&#xff0c;循环的用法&#xff0c;就想找一些练习题&#xff0c;比如小游戏猜大小&#xff0c;程序思路如下&#xff1a; 附上源代码如下&#xff1a; 摇骰子的函数&#xff0c;这个函数其实并不需要传任何参数&#xff0c;调用后…

【Delphi】中多显示器操作基本知识点

提要&#xff1a; 目前随着计算机的发展&#xff0c;4K显示器已经逐步在普及&#xff0c;笔记本的显示器分辨率也都已经超过2K&#xff0c;多显示器更是普及速度很快。本文介绍下Delphi中操作多显示器的基本知识点&#xff08;Windows系统&#xff09;&#xff0c;这些知识点在…

【Java】 方法引用与Lambda(快速上手)

Java系列文章目录 补充内容 Windows通过SSH连接Linux 第一章 Linux基本命令的学习与Linux历史 文章目录 Java系列文章目录一、前言二、学习内容&#xff1a;三、问题描述四、解决方案&#xff1a;4.1 方法引用 五、总结&#xff1a; 一、前言 Calculator::plus看到::好奇有什…

使用多种机器学习模型进行情感分析

使用 TF-IDF 与贝叶斯分类器进行情感分析是一个常见且有效的组合&#xff0c;特别是在文本分类任务中。贝叶斯分类器&#xff08;通常是朴素贝叶斯分类器&#xff09;等机器学习模型具有计算简单、效率高的优点&#xff0c;且在文本分类任务中表现良好。接下来&#xff0c;我将…

eNSP 华为ACL配置

华为ACL配置 需求&#xff1a; 公司保证财务部数据安全&#xff0c;禁止研发部门和互联网访问财务服务器&#xff0c;但总裁办不受影响 R1&#xff1a; <Huawei>sys [Huawei]sys Router1 [Router1]undo info-center enable [Router1]int g1/0/0 [Router1-GigabitEth…

语音助手Verbi:科技创新的未来

今天&#xff0c;我要向大家介绍一个名为Verbi的语音助手项目。这是一个结合了多种先进技术的模块化语音助手应用程序&#xff0c;能够实现语音到文本、文本生成和文本到语音的全流程处理。通过这个项目&#xff0c;我们可以体验到尖端科技如何改变我们的日常生活。 Verbi的诞…

ubuntu配pip的源

临时使用源 pip install [包名] -i [pip源URL]# 示例 pip install pytest -i https://pypi.tuna.tsinghua.edu.cn/simple更换配置pip镜像源 step1&#xff1a;创建一个配置文件 mkdir ~/.pip/ cd .pip sudo vim pip.conf step2:填写源信息&#xff0c;保存并退出【:wq】 [g…

文件包含漏洞(一)

本文仅作为学习参考使用&#xff0c;本文作者对任何使用本文进行渗透攻击破坏不负任何责任。 一&#xff0c;漏洞简述。 文件包含漏洞&#xff0c;通常发生在Web应用程序中&#xff0c;特别是那些使用用户输入动态生成内容的部分。这种漏洞允许攻击者通过提交恶意的文件路径请…

10 个 C# 关键字和功能

在 Stack Overflow 调查中&#xff0c;C# 语言是排名第 5 位的编程语言。它广泛用于创建各种应用程序&#xff0c;范围从桌面到移动设备再到云原生。由于有如此多的语言关键字和功能&#xff0c;对于开发人员来说&#xff0c;要跟上新功能发布的最新信息将是一项艰巨的任务。本…

C语言——操作符详解

目录 1.操作符的分类 2.原码、反码和补码 3.移位操作符 3.1 左移操作符 3.2 右移操作符 4.位操作符 4.1 按位与& 4.2 按位或| 4.3 按位异或^ ​编辑 4.4 按位取反~ 4.5 应用题 4.5.1 题目&#xff1a;不能创建临时变量&#xff0c;实现两个整数的交换 4.5.2 …