在vuex中，不经过mutations能直接修改state中的数据吗？为什么

最新推荐文章于 2024-05-13 18:48:08 发布
最新推荐文章于 2024-05-13 18:48:08 发布
阅读量2.1k 收藏 6
点赞数 1
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xg1201/article/details/123966937
版权

不经过mutations不能直接修改state中的数据，因为state是实时更新的，如果直接修改state中的数据是异步操作，当state异步还没有执行完，state的数据就有可能发生变化，会导致程序出问题，所以必须通过mutations限制state不允许异步操作

叶涵1201
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue-vuex中使用commit提交mutation来修改state的原因解析
BigKongfuPanda的博客
10-26 3万+
在vuex中，关于修改state的方式，需要commit提交mutation。官方文档中有这么一句话： 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。 为了搞清楚其原因，查阅了很多资料，发现其它人在做vuex的源码解析的时候，并没有将这点说的很明白。所以只好自己去查看vuex的源码，并且自己做demo进行验证。但是试验后，发现直接修改state时，store中的st
Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解
01-19
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。 Vuex 中的 mutation 非常类似于事件： 每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态...
在Vuex中Mutations修改状态操作
10-15
主要介绍了在Vuex中Mutations修改状态操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vuex为什么不能直接修改数据
weixin_45675581的博客
02-02 2171
首先要知道vuex是单向数据流，如果在组件中可以直接修改state数据就违背了vuex这个仓库了。 还有就是，如果组件内可以修改state数据，那么如果是异步修改怎么办？所以有很多无法预测的问题，而且可以读一下原文链接： vuex 不但是一种全局修改数据的工具，更重要的意义是在于把跨组件的交互，拆分为基于状态管理的处理。 使用如 vuex 本身就是希望基于这样一个数据结构的约定，使得项目代码更加直观和简单。每一个 state 树对应整个项目的一个数据，每一个 mutation 执行完成后都可以更新到一个新的
2024年前端最新Vue进阶（四十三）：Vuex之Mutations详解_vuex mutations，面试官的犀利问题
最新发布
2401_84412357的博客
05-13 339
通俗理解mutations，里面装着一些改变数据方法的集合，这是Vuex设计很重要的一点，就是把处理数据逻辑方法全部放在mutations里面，使得数据和视图分离。
(汇总)为什么Vuex要通过mutations修改state，而不能直接修改
Dax1_的博客
12-23 5845
为什么Vuex要通过mutations修改state，而不能直接修改 因为state是实时更新的，mutations无法进行异步操作，而如果直接修改state的话是能够异步操作的，当你异步对state进行操作时，还没执行完，这时候如果state已经在其他地方被修改了，这样就会导致程序存在问题了。所以state要同步操作，通过mutations的方式限制了不允许异步。 原文链接 vuex 不但是一种全局修改数据的工具，更重要的意义是在于把跨组件的交互，拆分为基于状态管理的处理。 使用如 vuex 本身就
浅谈vuex为什么不建议在action中修改state
11-20
背景 在最近的一次需求开发过程中，有再次使用到Vuex，在状态更新这一方面，我始终遵循着官方的“叮嘱”，谨记“一定不要在action中修改state，而是要在mutation中修改”；于是我不禁产生了一个疑问：Vuex为什么要给出这个限制，它是基于什么原因呢？带着这个疑问我查看Vuex的源码，下面请大家跟着我的脚步，来一起揭开这个问题的面纱。 一起阅读源码吧~ 1.首先我们可以在src/store.js这个文件的Store类中找到下面这段代码 // ... this.dispatch = function boundDispatch (type, payload) { return
在vuex中更新state时，为什么将异步方法写在actions中，而不是mutations，这是为什么？
希文Gershwin
07-19 2268
vuex中更新state的方法 首页，在 vuex 中只有 mutations 可以更新state commit 一个 mutation，mutation 负责更改 state dispatch 一个 action，在 action 中 commit 一个 mutation 所以按照上述使用方法，我们在使用时，如果不涉及异步操作，可以直接 commit 一个 mutation 去更改 state，如果有异步就需要将异步方法写在 dispatch 中，然后在 dispatch 中commit mutat
vue学习篇–组件只能可以通过this.$store.state访问到状态，为什么不能在组件中直接修改state原因
it问答网 itwenda.com
01-28 742
vue学习篇–组件只能可以通过this.$store.state访问到状态，为什么不能在组件中直接修改state原因
vuex直接修改state 与 用commit提交mutation来修改state的差异
qq_37683424的博客
06-18 859
一. 使用vuex修改state时，有两种方式： 1）可以直接使用 this.$store.state.变量 = xxx; 2）this.$store.dispatch(actionType, payload) 或者 this.$store.commit(commitType, payload) 二. 异同点 1）共同点： 能够修改state里的变量，并且是响应式的（能触发视图更新） 2）不同点： 若将vue创建 store 的时候传入 strict: tr...
vuex提交state&&实时监听state数据的改变方法
12-08
websocket长连接 根据指示进行四个页面之间的跳转，在各页面执行相应的逻辑处理。 项目搭建结构如下所示： 解决方案 在四个页面外面写个父页面，router路径如下所示： vuex \src\store\mutations.js //存储到vuex...
Vuex中实现数据状态查询与更改
10-16
本篇文章将详细解释如何在Vuex中实现数据状态的查询与更改。 首先，为了在Vue应用中使用Vuex，我们需要先安装和配置。在项目中引入Vuex，可以通过npm或yarn安装： ```bash npm install vuex # 或 yarn add vuex ``...
Vuex之理解Mutations的用法实例
08-30
在上面的代码中，我们首先创建了一个 Vuex store，然后在 mutations 中注册了一个名为 increment 的 mutation。这个 mutation 的作用是将状态 count 递增 1。最后，我们使用 store.commit 方法来触发这个 mutation。...
vuex实现像调用模板方法一样调用Mutations方法
10-16
在Vue.js应用中，Vuex是一个非常重要的状态管理库，它允许我们集中管理全局的状态，使得数据在组件之间共享变得更加方便。在Vuex中，Mutations是用于改变State的唯一途径，通常我们在模板中调用它们时需要通过`$...
Vue.js中使用Vuex实现组件数据共享案例
10-15
安装完成后，你需要在项目中设置Vuex的结构，包括`main.js`、`store.js`以及`state`、`actions`和`mutations`等核心概念。 在`main.js`中，你需要导入Vuex并创建一个store实例，然后将它挂载到Vue的原型链上，这样...
vuex state中的数组变化监听实例
12-13
vuex的state用来放数据，我就把数组放在了vuex中,然后设置了修改的函数。最终store.js中的代码如下： import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const state = { messArray:[] } const ...
vuex之不能在外部修改state的值
wang9rui的博客
04-23 2845
我们使用vuex时可能不小心在外部修改state的值提出红色警告 解决方案：如果是数组类型JSON.parse(JSON.stringify())使用深拷贝不去影响state的值即可
vuex 跨过了commit 直接修改state的数据会怎样？
qq_45178972的博客
06-03 466
如果直接this.$store.state = xxx ;的话Chrome的vue devtool 插件就无法监听观察到state的变化； 所以必须通过commit 给mutation来修改state的数据
你不一定需要提交mutation改变state
少油少盐不要辣
08-01 255
1.不一定需要提交mutation去更改store的state 可以直接修改state this.$store.state.myprop = 'Hello world'; 但是，当你的项目代码越来越大时，你可能无法知道你在哪改变了你的state中的值，开发中调试变得异常困难。 提交mutation，本质上就是记录了你每次修改类型和值。配合vue-devtools你可以方便的撤销和恢复你的操作，调试变得容易许多，提升开发效率。 ...
Vuex.Store中的state和mutations
06-07
在Vuex.Store中，state是用来存储数据的对象，mutations是用来修改... mutations中的方法还可以被异步调用，但是异步操作不能直接修改state中的数据。如果需要在异步操作中修改state中的数据，可以使用actions来实现。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值