【面试题系列Vue07】Vuex是什么?使用Vuex的好处有哪些?

Vuex介绍

Vuex是一个专为Vue.js应用程序开发的状态管理模式,采用集中式存储管理应用的所有组件的状态,解决多组件数据通信。

(简单理解,Vuex 维护了⼀个对象,该对象存储了 Vue 应⽤中多个组件所需要共同使⽤的变量,使得组件可以共享它们,当对象中的变量发⽣变化时,不同组件中使用变量的地方也会相应地更新。其中,状态包含以下几个部分:

state,驱动应用的数据源;

view,以声明方式将 state 映射到视图;

actions,响应在 view 上的用户输⼊导致的状态变化。

下图为单向数据流示意图:

当应⽤中遇到多个组件共享状态时,单向数据流的简洁性很容易被破坏:

  • 多个视图依赖于同⼀状态。
  • 来⾃不同视图的行为需要变更同⼀状态。

对于问题⼀,传参的方法对于多层嵌套的组件将会非常繁琐,并且对于兄弟组件间的状态传递无能为力。

对于问题⼆,我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱,通常会导致无法维护的代码。

优势

  • 响应式 :相比于⼀个简单的全局对象,Vuex 的状态存储是响应式的。当 Vue 组件从 store 中 读取状态的时候,若 store
    中的状态发生变化,那么相应的组件也会进行高效的更新,从而确保了单向数据流的简洁性不被破坏。
  • 集中化管理:Vuex 通过把组件的共享状态抽取出来,以全局单例模式管理,这样任何组件都能用一致的方式获取和修改状态,使代码变得更具结构化且易于维护。
  • 插件式扩展:Vuex 允许开发者编写插件来扩展其功能,⽐如实现⽇志记录、持久化存储和调试等。也就是说,开发者可以根据应⽤程序的需求来选择性地扩展其功能。
  • 高度集成:由于 Vuex 是专⻔为 Vue.js 设计的,因此可以与 Vue.js 高度集成。在使用 Vuex 的 同时,还可以利用Vue.js 的许多特性,如指令、组件、计算属性等来构建更强大的应用程序。

应用场景

如果需要开发⼤型单页应用或应用里需要维护大量全局的状态,就可以使用 Vuex,否则,⼀个简单的 store 模式就够了。

用法

  1. Vuex 将全局状态放入 state 对象中,它本身是⼀棵状态树,组件中使用 store 实例的 state 访问这些状态。
  2. 用配套的 mutation 方法修改这些状态,并且只能用 mutation 修改状态,在组件中调用commit 方法提交 mutation。
  3. 如果应用中有异步操作或复杂逻辑组合,需要编写 action,执行结束如果有状态修改仍需提交mutation,组件中通过 dispatch 派发 action。
  4. 最后是模块化,通过 modules 选项组织拆分出去的各个子模块,在访问状态(state)时需注意添加子模块的名称,如果子模块有设置 namespace,那么提交 mutation 和派发 action 时还需要额外的命名空间前缀。
相关推荐
zzz_23684 分钟前
【Redis】Redis 面试深度系列
数据库·redis·面试
Java_2017_csdn14 分钟前
在 Java 中,MessageFormat.format() 和 String.format() 函数对比?
java·开发语言·前端·数据库
IT策士15 分钟前
第 44篇 k8s之实战:将 Web 应用迁移到 Kubernetes(上)
前端·容器·kubernetes
用户0595401744627 分钟前
把Agent记忆测试从Mock换到真实Redis,漏测率从30%降到0
前端·css
吃阿茶搽28 分钟前
大模型RAG实战,从被骂不靠谱到成为部门MVP,我的踩坑全记录
vue.js
Surprisec28 分钟前
如何用 TypeScript 写一个最小可运行的 CLI Agent
前端·人工智能·typescript
marskim29 分钟前
零依赖、高性能!从零实现 React 拖拽排序组件(基于 HTML5 Drag and Drop API)
前端
jingling55531 分钟前
从零到一:用 Aholo Viewer 在浏览器里渲染 3D 高斯泼溅小熊
linux·前端·ubuntu·3d
晓杰'36 分钟前
从0到1实现Balatro游戏后端(7):Boss Blind与特殊规则实现
后端·websocket·typescript·node.js·游戏开发·项目实战·nestjs
Good kid.38 分钟前
开源一套 Vue3 多模态 AI 控制台前端:游乐场、工作室与 API 文档页
前端·人工智能·开源