Vuex的触发流程

最新推荐文章于 2024-04-04 23:49:09 发布
最新推荐文章于 2024-04-04 23:49:09 发布
阅读量154 收藏
点赞数
文章标签： 前端 javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tx99230/article/details/130928138
版权

我们为什么要有Vuex，Vuex的作用又是什么？

Vuex的作用是解决多组件状态共享的问题，在大型的项目中，组件通讯会变得很混乱，使用Vuex可以统一管理组件之间的通讯，它是独立于组件单独存在的，所有的组件都可以把它当作一座桥梁来进行通讯。

使用Vuex的好处是什么？

  • 响应式 ： 只要vuex中的数据变化，对应的组件会自动更新(类似于vue数据驱动)
  • 操作更简洁 ： 类似于sessionStorage，只有几个方法

Vuex的使用场景

不是所有的地方都可以用到Vuex，只有在必要的时候才会用到Vuex，如果不是特别必要尽量别用使用了Vuex之后项目开发会提升一些难度，也会增加项目的复杂度

适合使用Vuex的场景

这个数据需要在很多地方用到，比如(头像，字体，姓名，个人页面，评论页面等)，如果采用组件传值的方式写起来会很麻烦，而且多个地方都要写

不适合使用Vuex的场景

这个数据不需要多个地方使用，如果仅仅只是在两个组件之间通讯，优先使用props和$emit

那么接下来就是Vuex中的5个属性介绍

 1.state作用：存储数据

state提供唯一的公共数据源，所有共享的数据都要统一放到Store中的state中存储

 2.getters作用：state的计算属性

 3.mutations作用：更新state中的数据

4.actions作用：

 actions与mutations相同点 ：

  • 都是修改state数据

 actions于mutations不同点：

  • mutations：同步更新
  • actions: 异步更新（例如你的数据来源于ajax）

5.modules作用：一般我们遇到大型项目时，数据量很大我们就会用到modules，将Store分割成模块，每个模块里面都拥有自己的state、mutations、acs、getters，然后在分割的模块进行我们的代码编译

 

Vuex的触发流程

 

 

 

鑫仔不想努力
关注
vuex使用流程
TF_0806
04-19 4632
使用流程 1.安装vuex npm install vuex --save； 2.store文件中引入vuex 为了方便全局使用，一般会新建一个store文件夹，用于存放相关状态值。文件夹下的index.js作为对外输入接口的主文件。在主文件中引入vuex,并输出store接口。 index.js: import Vue from 'vue'； import Vuex from 'vuex'； ...
vuex 使用的一般流程
qq_44681288的博客
11-01 421
一、基本用法 1.创建项目 vue create app_vuex cd app_vuex npm install 2安装vuex npm install vuex --save-dev 3在src目录下创建一个store目录 在里面创建一个 index.js ，并在main.js文件中进行配置 index.js中写入 importVuexfrom...
通过vuex传递参数并触发组件中的事件
前端开发
11-30 9280
组件A为公共组件，负责定时查询信息通知，并通过模态展示； 组件B为业务组件，负责项目中报告的编辑审核等业务流程； 用户打开组件A中的信息通知模态时，可以选择接受或拒绝处理相关通知，接受时直接打开组件B进行业务，拒绝时只刷新通知不进行其他操作。这就需要监听组件A中的事件，当用户打开通知模态点击接受时，获取组件A中所选择用户的id并触发组件B中的方法。
Vuex事件处理机制
m0_59951344的博客
08-23 155
Vuex的五个核心属性 state：单一状态数，在这里定义我们所需要的数组，对象，字符串等，这样在vue组件中才能获取你定义的这个对象的状态。直接使用就是store.state.属性名， 映射引入mapState,在计算属性中展开（…mapState([‘属性名’]）直接插值表达式使用即可 getters：类似于vue的计算属性，需要返回值，当我们需要从state中派生出一些状态，就需要使用getters,getters中定义的函数第一个参数是state，只有getters中的依赖值（state中的
企图为vuex添加发布订阅：事件绑定和事件触发
weixin_34109408的博客
03-16 1924
企图给vuex补充事件触发，小心地实现一个发布订阅，并说服自己这是合理的。 主要内容： 跨组件通信：从event bus 到vuex 一个比较麻烦的case: 跨组件触发事件 mutation和action，同步异步，动机拆解 封装发布订阅，让vuetool可调试追踪 完善代码，抽离逻辑，约定规范 作用: 可以方便地用on和 emit方式，从一个组件触发另一个组件方法，不需增加状态变量 可以...
事件总线（EventBus）,父子、兄弟组件间通信，一个页面调用另一个页面的方法 & 使用eventbus遇到的问题（多次触发、第一次不触发）
金乌的博客
11-25 3887
组件通信时，有时两个组件之间毫无关系，或者他们之间的结构复杂，这时就要用到 vue 中的事件总线 EventBus的概念。EventBus 又称为事件总线。EventBus的用途：1.解决一个页面调用另一个页面的方法2.解决父子组件、兄弟组件间的通信。
vue.js中引入vuex储存接口数据及调用的详细流程
10-18
**引入Vuex储存接口数据及调用的详细流程** 1. **安装Vuex**：首先，需要使用npm安装Vuex库，命令如下： ``` npm install vuex --save ``` 如果在国内使用npm较慢，建议使用淘宝的镜像（cnpm）进行安装。 2....
vuex工作原理与流程
此鱼非闲鱼也的博客
05-21 4141
vuex工作原理与流程 Vue组件（action里面的dispatch )--> actions(commit方法） -->mutations（Mutate）--> state（getter） -->store更新所有调用vuex的组件（Vue Component组件） 1、state 存储应用状态数据的对象，与vue组件中data类似 state的值可以是对象，也可以是返回对象的函数 通过store.state访问状态数据 示例如下： import Vue from 'vue' i
消息列表使用vuex来获取数据工作流程1
08-08
在本文中，我们将深入理解如何使用Vuex来获取并管理消息列表数据，以此为例来阐述Vuex的工作流程。 首先，在`store.js`中，我们需要引入Vuex库并创建一个新的Vuex.Store实例。这通常涉及到`Vue.use(Vuex)`来注册...
vuex用法
y18774585870的博客
04-18 313
<template> <div> <button>删除事件</button> <button @click="clickVuexEvent()">点击触发vuex事件</button> <button @click="oddJia()">奇数时候再加</button> <button @click="waitAdd()">延迟时候再加</button>
Vue组件通信
low神
07-16 928
父子级通信推荐使用：props/$emit、$parent/$children/$refs、$attrs/$listeners 兄弟组件通信推荐使用：$emit/$on、Vuex 无关系组件通信推荐使用：$emit/$on、Vuex、$attrs/$listeners、provide/inject 1、props和$emit（父子组件通信） 子组件使用prop...
Vuex怎么使用，Vuex获取变量值，Vuex修改变量值和触发定义的方法！
海贼王某人的博客
06-24 9015
今天来简单介绍一下Vuex在使用过程中应该怎么获取或者改变我们在state中声明的变量； 关于这个问题，其实答案有很多种，每个人的习惯都不太一样，而最为正确和最安全的方法我来大概介绍一下，希望可以帮到大家！ 1.首先我们来引入vuex,里面的几个常用方法我就不一一介绍了，首先在state里面声明一个变量pathName，在定义一个方法savePath，第一个参数固定state，指向就是state本身，第二个参数是你调用方法时传的参数，如下图 // 在store里面的index.js文件写入 import
Vue中vuex的使用
Machoul的博客
03-31 868
Vue中vuex的使用 概述 在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。 在多个组件需要共享数据时使用 使用方式 在src/store文件夹下创建index.js文件 //引入Vue核心库 import Vue from 'vue' //引入Vuex import Vuex from 'vuex' //应用Vuex插件 Vue.use(Vuex) //准备actions对象——响应
android事件分发面试，详解Vuex常见问题、深入理解Vuex(1)，前端性能优化之启动优化实战篇
最新发布
04-04 672
/ …})})
【Vue】之Vuex的入门使用，取值，修改值，同异步请求处理---保姆级别教学
m0_73192864的博客
10-11 1773
【Vue】之Vuex的入门使用，取值，修改值，同异步请求处理---保姆级别教学
德国Vue.js2终极开发教程（含Vue路由和Vuex）
03-08
新手入门现代前端开发的不二选择课程目标：* 学会从简单到复杂企业级应用的VueJS程序编写方法* 能在单页和多页应用中自如使用VueJS* 真正理解VueJS的背后原理，并在真实项目中应用它们授课计划：23章节，21小时，341个视频，11个练习，3个工程实践；新VueJS 2.x版本，课程随版本升级。
Vue基础知识总结 14：Vuex是做什么的?
热门推荐
学Java，找哪吒
05-11 1万+
官方解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。 它采用 集中式存储管理 应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 Vuex状态管理图例 简单的案例 ...
vuex使用前与使用后的写法---action（触发事件改变此事件时--变更状态）
mandy' blog
12-10 2364
Action 提交的是 mutation，而不是直接变更状态。 Action 可以包含任意异步操作。 Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。  通过actio...
vuex的执行流程？
09-08
Vuex的执行流程是通过dispatch提交一个actions，在actions接收到这个事件后，进行一些异步或同步操作，然后根据情况分发给不同的mutations。actions通过commit触发mutations，mutations则负责更新state。一旦state被...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值