state更新为什么函数重新执行

时间: 2024-05-25 16:19:07 浏览: 22

浅谈vuex为什么不建议在action中修改state

5星 · 资源好评率100%

背景在最近的一次需求开发过程中，有再次使用到Vuex，在状态更新这一方面，我始终遵循着官方的“叮嘱”，谨记“一定不要在action中修改state，而是要在mutation中修改”；于是我不禁产生了一个疑问：Vuex为什么要给出这个限制，它是基于什么原因呢？带着这个疑问我查看Vuex的源码，下面请大家跟着我的脚步，来一起揭开这个问题的面纱。一起阅读源码吧~ 1.首先我们可以在src/store.js这个文件的Store类中找到下面这段代码 // ... this.dispatch = function boundDispatch (type, payload) { return Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，它强调了状态管理的集中化和可追踪性。在Vuex中，我们通常遵循一个原则：不在 action 中直接修改 state，而应该通过 mutation 来进行。这个设计背后的考虑主要有以下几个方面： 1. **可追踪性**：Vuex 的 mutation 是为了确保每次对 state 的更改都有迹可循。在 Vuex 中，每个 mutation 都是一个函数，记录了改变状态的具体操作。当在 mutation 中修改 state，开发者可以清晰地看到状态变化的原因，这对于调试和理解代码流程非常有帮助。 2. **并发控制**：Vuex 提供了一种机制来处理并发的 state 更改。在 `_withCommit` 函数中，`_committing` 标志用于确保在 mutation 处理过程中，不会有其他并发的 mutation 同时修改 state。这有助于避免因并发操作导致的状态混乱。 3. **严格模式**：Vuex 提供的严格模式 (`strict` 模式) 可以强制检查所有状态变更是否在 mutation 内发生。如果在 action 中直接修改 state，且 strict 模式开启，Vue 组件会抛出错误，提示不在 mutation handler 中修改状态。这可以帮助开发者避免意外的 state 修改，保持数据流的纯净。 4. **模块化和可扩展性**：Vuex 允许定义命名空间内的 mutation，这样可以将状态管理组织得更加有序。如果在 action 中直接修改 state，可能会导致状态更改的混乱，特别是在大型应用中，难以跟踪各个模块之间的状态交互。 5. **测试友好**：由于 mutation 是显式调用的，开发者可以在测试中方便地触发特定的 mutation，检查其结果，从而确保状态管理逻辑的正确性。如果在 action 中修改 state，测试将变得更加复杂，因为 action 可能会间接导致多个状态变化。 6. **优化性能**：Vue.js 使用响应式系统来追踪依赖，通过 action 修改 state 可能会导致不必要的视图更新。而在 mutation 中进行修改，Vue 能够更精确地知道哪些组件需要重新渲染，从而提高性能。通过以上分析，我们可以理解为什么 Vuex 强烈建议在 action 中只做异步操作，而把同步状态变更留给 mutation。这不仅有利于保持代码的整洁，也有助于提升应用的可维护性和可测试性。因此，遵循这一最佳实践对于构建健壮的 Vue 应用至关重要。

在 React 中，当组件的状态（state）发生变化时，会触发组件的重新渲染。在重新渲染的过程中，组件的所有函数都会重新执行，包括 state 更新函数。这是因为 React 通过比较前后两次渲染的虚拟 DOM 树来确定需要更新哪些部分，从而实现高效的更新。因此，当组件的状态发生变化时，React 会重新渲染组件并执行所有相关函数来确保组件的显示状态和状态数据保持同步。

阅读全文

state更新为什么函数重新执行

相关推荐

Stateflow教程,stateflow教程 pdf,matlab

函数式编程思维.pdf_函数式编程_函数式编程思维_

state更新函数重新执行

JS_modulePattern_ClassExample_State_of_the_Art:用于定向的 JavaScript 示例类，具有私有和公共函数。 编写为模块模式，非单例。 可以直接执行（onload），或者稍后在被另一个语句显式调用时执行

stateflow 更新方法：使用 stateflow 块来确定系统所处的状态-matlab开发

loadrunner函数

cocos2dx中lua扩展（ccb执行完回调函数扩展）

stateMachine

opnet核心函数

php魔术函数

autherware函数大全

vxworks函数说明

DB2函数详解

LoadRunner函数大全

stateflow实践

C语言statemachine

stateflow教程

React面试题深度解析：异步action、render触发与state更新

最新推荐

浅谈vuex为什么不建议在action中修改state

vue实现输入框的模糊查询的示例代码（节流函数的应用场景）

Matlab中Stateflow应用

基于Flask，mysql slope one的图书推荐系统全部资料+详细文档.zip

WordPress作为新闻管理面板的实现指南

管理建模和仿真的文件

函数与模块化编程宝典：J750编程高效之路

用C语言求有4个圆塔，圆心分别为（2，2)，(2，-2)，(-2，2)，(-2，-2)圆半径为1， 这4个塔的高度为10m 塔以外无建筑物接输入任意点的坐标 求该点的建筑高度（塔外的高度为零)的程序

NPC_Generator：使用Ruby打造的游戏角色生成器

"互动学习：行动中的多样性与论文攻读经历"

JS_modulePattern_ClassExample_State_of_the_Art:用于定向的 JavaScript 示例类，具有私有和公共函数。编写为模块模式，非单例。可以直接执行（onload），或者稍后在被另一个语句显式调用时执行

用C语言求有4个圆塔，圆心分别为（2，2)，(2，-2)，(-2，2)，(-2，-2)圆半径为1，这4个塔的高度为10m 塔以外无建筑物接输入任意点的坐标求该点的建筑高度（塔外的高度为零)的程序