美文网首页
Vuex的工作流程

Vuex的工作流程

作者: xiaojingy | 来源:发表于2020-09-04 17:38 被阅读0次

前几天面试,被面试官问到这个问题,而由于知识点没有记牢,导致直接被pass,心情顿时不好了,现在决定把vuex彻底搞清楚:

1、什么是vuex
vuex是项目里面的状态管理器,统一管理和维护各个组件的可变化状态,vue的应用核心是store,vue有五个核心概念,state, getters, mutations, actions, modules。
2、对vuex的简单理解
每一个 Vuex 应用的核心就是 store,里面又包括:
(1)state(数据):用来存放数据源,就是公共状态;
(2)getters(数据加工):有的时候需要对数据源进行加工,返回需要的数据;
(3)actions(事件):要执行的操作,可以进行同步或者异步事件
(4)mutations(执行):操作结束之后,actions通过commit更新state数据源
(5)modules:使用单一状态树,致使应用的全部状态集中到一个很大的对象,所以把每个模块的局部状态分装使每一个模块拥有本身的 state、mutation、action、getters、甚至是嵌套子模块;

所以,简单的来说,vuex的工作流程就是:
(1)通过dispatch去提交一个actions,
(2) actions接收到这个事件之后,在actions中可以执行一些异步|同步操作,根据不同的情况去分发给不同的mutations,
(3)actions通过commit去触发mutations,
(4)mutations去更新state数据,state更新之后,就会通知vue进行渲染

面试题:
1、为什么不能在mutations执行异步操作?
Vuex中所有的状态更新的唯一途径都是mutation,异步操作通过 Action 来提交 mutation实现,这样使得我们可以方便地跟踪每一个状态的变化,从而让我们能够实现一些工具帮助我们更好地了解我们的应用。
每个mutation执行完成后都会对应到一个新的状态变更,这样devtools就可以打个快照存下来,然后就可以实现 time-travel 了。如果mutation支持异步操作,就没有办法知道状态是何时更新的,无法很好的进行状态的追踪,给调试带来困难。

相关文章

  • 快速入门Vuex 魔法

    Vuex核心 Store State Mutation Action Module Vuex 的工作流程图 下面我...

  • 前端常见面试题六

    目录: 1、什么是Vuex?详述Vuex的工作流程 2、详述Vuex的核心属性及使用 3、vue和jquery的区...

  • 前端面试题(六)--高频面试题

    1.什么是Vuex?详述Vuex的工作流程 答: 官方介绍:Vuex 是一个专为 Vue.js 应用程序开发的状态...

  • Vuex

    什么是Vuex?详述Vuex的工作流程 官方介绍:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。...

  • 前端常见面试题(四)@郝晨光

    什么是Vuex?详述Vuex的工作流程 官方介绍:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。...

  • Vuex的工作流程

    前几天面试,被面试官问到这个问题,而由于知识点没有记牢,导致直接被pass,心情顿时不好了,现在决定把vuex彻底...

  • vuex的使用

    同步的vuex提交的流程图: 异步vuex 修改数据的流程 Mutations里面如何传参: Vuex里面如何使用...

  • 面试题总结@

    第一天 1、简述vuex的工作流程? 2、vuex-router导航守卫(钩子函数)? 3、详述keep-aliv...

  • 第一天

    1、简述vuex的工作流程? 2、vuex-router导航守卫(钩子函数)? 概念导航发生变化时,导航钩子主要用...

  • vue

    $ cnpm install vue vuex 流程讲解 使用vuex的方式,点击按钮 → dispatch ac...

网友评论

      本文标题:Vuex的工作流程

      本文链接:https://www.haomeiwen.com/subject/migzsktx.html