Vuex的五大模块

最新推荐文章于 2024-04-28 11:24:59 发布
最新推荐文章于 2024-04-28 11:24:59 发布
阅读量1.3k 收藏 23
点赞数 25
分类专栏： vue 文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44588612/article/details/125307271
版权

前言

相信大家在学习组件通信时，多个组件之间进行通信，会存在父传子，子传父，兄弟传兄弟等等情况的发生，多个组件互相通信容易造成逻辑混乱，数据不好管理，复用性差的情况，而Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化；总结一句话就是：Vuex是用来集中管理组件依赖的数据，很好的解决了组件之间通信麻烦不易维护的缺点；下面我将结合Vue.js官网带领大家深入学习Vuex的五大模块；
Vuex的原理图

文章の目录

state模块

如上原理图所示，其中的state模块是用来定义和存放数据的，如果使用次数不多，可以使用$store.state.数据名去读取state中存放的数据；其中的store是Vuex模块的管理者，无论调用dispatch还是commit都需要store。多次使用建议用mapState引入，然后在computed中用…展开使用，mapState本身是一个函数，调用传递一个数组，要用哪像直接将名字写到数组里就行，他的返回值是一个对象，对象里存的就是想要用到的数据的计算属性使用：直接写this.数据名字就行；

actions模块

actions模块用于响应组件中的动作一般代码的逻辑写在actions中，比如我需要点击一个按钮500毫秒以后提交给下一个模块操作，此时可以给commit操作写在一个定时器里面，500毫秒以后再调用commit方法；

mutations模块

此模块用于修改state模块中的数据，actions模块调用commit方法就能直接将数据传到mutations模块中，mutations模块可以根据收到的数据，直接修改state模块中储存的数据；

getters模块

此模块用于对state的中存储的数据进行加工处理，有点类似于computed计算属性；

store模块

store如上原理图所示，是用于管理其它模块的，在调用dispatch和commit方法时，都需要使用$store;
dispatch
在这里插入图片描述
commit
在这里插入图片描述

写在最后

🥂(❁´◡`❁)您的点赞👍➕评论📝➕收藏⭐是作者创作的最大动力🤞

前端小二哥
关注
  • 25
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 38
    评论
专栏目录
vue - vuex详细讲解和modules模块化的使用
qq_43886365的博客
09-16 4928
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 通俗的来说，vuex是用于当某一状态需要在多个组件中共享，方便我们使用并追踪这些状态时使用。
Vuex模块概念
m0_53951384的博客
11-09 125
这句话的意思是，如果把所有的状态都放在state中，当项目变得越来越大的时候，Vuex会变得越来越难以维护。尽管已经分模块了，但其实子模块的状态，还是会挂到根级别的 state 中，属性名就是模块名。掌握模块中 action 的调用语法 (同理 - 直接类比 mutation 即可)默认模块中的 mutation 和 actions 会被挂载到全局，默认模块中的 mutation 和 actions 会被挂载到全局，使用模块中的数据, 可以直接通过模块名访问。掌握模块中 mutation 的调用语法。
vuex框架使用（框架，模块化）
最新发布
m0_49936845的博客
04-28 1069
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它允许您在应用程序中的组件之间共享和管理状态。即vuex是管理器框架内部图：state：用于存储共享数据（就是所有组件都需要访问的数据，为了方便起见存到state中，这也是vuex的主要功能）mutation：用于数据state的基础操作（如果学过springmvc，相当于持久化层）actions：用于业务流程操作（相当于业务层）
5 vuex
Agoni___的博客
03-06 88
自学vue笔记
vuex的模块化
richest_qi的博客
05-06 2064
本例有两个组件，分别是， Count组件，详见Count.vue。 Person组件，详见Person.vue。 Count组件和Person组件共享以下两个数据： sum personList 代码主要涉及如下3个文件， store/index.js App.vue Count.vue Person.vue main.js main.js import Vue from 'vue' import App from './App.vue' import store from "./store".
数据仓库-vuex-分模块
ly1477868382的博客
12-05 409
vuex
vuex全家桶.pdf
12-09
- **Modules**：对于大型应用，我们可以将 Vuex store 分解为模块，每个模块拥有自己的 state、mutations、actions 和 getters，以保持代码的可维护性。 在实际使用中，我们还需要注意以下几点： - **防止直接修改...
五分钟搞懂Vuex实用知识(小结)
10-16
5. **Modules**：对于大型项目，为了更好地组织状态，Vuex 允许我们将 store 分割成模块（modules），每个模块都有自己的 state、getters、mutations 和 actions，可以独立管理。 创建 Vuex store 的步骤大致如下：...
Vuex的使用Demo
12-30
首先，Vuex 提供了五个核心概念：状态（State）、getter（Getters）、 mutations（Mutations）、actions（Actions）和 modules（Modules）。这五个部分构成了 Vuex 的核心架构。 1. **状态（State）**：在 Vuex 中...
VUEX和LocalStorage的应用
12-29
在Vuex中，有五个核心概念：state（状态）、mutations（ mutation事件，用于改变state）、actions（异步操作，可以触发mutation）、getters（计算属性，基于state进行计算）和modules（用于模块化状态管理）。...
vuex离线教程.rar
12-24
5. **Modules**（模块）：当应用变得庞大时，Vuex允许我们将store分割成独立的模块，每个模块拥有自己的state、mutations、actions和getters，以实现更好的组织和代码复用。 在Vuex教程中，你可能会学习到如何创建...
VUEX,5大核心以及核心用处
m0_67243599的博客
04-28 720
vuex 其实就是vue官方提供的一个状态管理工具，我们可通过vuex进行组件之间数据共享问题， vuex 共有5大核心，分别为： 1 ：state 数据源载体 ，保存的是状态，也可以理解为数组 2: getters 用于获取state的状态可以对state进行处理，类似于计算属性 3： mutation 是用来修改state里面的数据 不过在它里面只能进行同步操作 4：actions 这个可以用来改变state里的状态，它只能进行异步的操作 5：modules 这个主要是为了模块化处理拆分，.
vuex+映射
qq_67263268的博客
08-11 442
vuex+映射
Vuex项目--模块化状态管理组件
qq_36582776的博客
12-27 279
1.安装vuex:cnpm install --save vuex 2.为home search ...分别创建对应的状态管理文件 新建store文件夹，文件夹里创建home,search等四个文件夹以及index.js（用于汇总四个状态管理组件），每个文件夹里创建相应的index.js用于汇总四个。 3. 状态管理组件的书写方式： const state={} const mutations={} const actions={} const getters={...
Vuex分模块使用
qq_39811414的博客
10-13 1340
前言 最近在做练手项目时，把vuex分模块进行了管理。但是对于语法的不熟悉，导致漏洞百出。这两天结合了vuex的官方文档，操作了一下分模块下，如何读取state、getters、actions等，如下是记录过程。 为什么分模块 之前看的代码，是把所有state、getters、actions写在一个文件，由于项目较大，感觉逻辑有点乱，于是可以利用分模块的办法，給每一个模块单独的state、getters、actions等，从而使得逻辑结构清晰。 案例代码 说明 如下图所示，我主要是分了两个模块a、b，分别在
vuex模块化
王攀
01-18 1767
写这个也是项目中用到了。不过没有参考vuex官网提供的demon去写，所以是怎么简单怎么来。只能说对vuex的理解有限。这里就记录一下我在项目中使用vuex的详细过程吧。后期要是有时间再来记录。 首先看下目录 图片有点大 那就分两步建立模块化的vuex吧。两步。建立modules建立承载modules的Vuex.Store建立modules/*ruteModule.js 路由状态模块数据*/ /*
VueX的模块你知道多少？
主要领域：前端开发
04-19 4074
为什么会出现VueX的模块呢？当你的项目中代码变多的时候，很难区分维护。那么这时候Vuex的模块功能就这么体现出来了。 那么我们就开始吧！ 一、模块是啥？ /* eslint-disable no-unused-vars */ import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex...
vueX的基本使用之Module（终）
热门推荐
会点php的前端小渣渣
03-21 2万+
(个人理解：module 例如：购物车模块，订单模块，商品模块...每个模块都有自己的数据)首先下面的内容是我复制的，我觉得写的还是容易理解的，基本上都看的懂，所以我自己就不重新造轮子了.....（其实是懒.....）module：可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。怎么用module？一般结构?123456789...
Vuex 之 module 使用方法及场景
绿足 博客
07-22 2万+
vuex 之 module 使用方法及场景 一. module 使用场景 在项目开发过程中，随着项目逐渐增大，数据关联复杂度逐渐加大， 多人协同开发，人员变动等。 我们会遇到vuex数据更新时，执行某个action 导致同名/未预测到的关联数据发生了变化。 vue 基本思想之一便是数据驱动， ...
vuex作用及五大组成部分
09-05
Vuex是一个用于Vue.js应用程序的状态管理模式。它解决了多个组件之间共享状态的问题，并提供了一种集中式管理和跟踪状态变化的机制。 Vuex的五大组成部分包括： 1. State（状态）：存储应用程序的状态数据，即共享的数据。可以通过this.$store.state来访问。 2. Getters（计算属性）：类似于Vue组件中的计算属性，可以对state进行派生，用于在组件中获取和计算状态。可以通过this.$store.getters来访问。 3. Mutations（变更）：用于修改state的唯一途径，通过提交一个mutation来改变state的值。每个mutation都有一个字符串的事件类型和一个回调函数，回调函数接收当前的state作为参数。 4. Actions（动作）：类似于mutation，但是可以包含任意异步操作。通常用于处理异步逻辑、封装多个mutation的复杂操作。Actions通过提交一个action来触发。 5. Modules（模块）：用于将Vuex的代码分割成模块，每个模块都有自己的state、getters、mutations和actions。可以嵌套模块以实现复杂的状态管理。 这五个部分共同构成了Vuex的核心架构，通过它们可以实现对应用程序中的状态进行统一管理和控制。
评论 38
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端小二哥

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值