当前位置: 首页 > article >正文

【面试题系列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 时还需要额外的命名空间前缀。

http://www.kler.cn/a/404729.html

相关文章:

  • JDK、MAVEN与IDEA的安装与配置
  • 不需要双手离开键盘 vscode
  • STM32与CS创世SD NAND(贴片SD卡)结合完成FATFS文件系统移植与测试是一个涉及硬件与软件综合应用的复杂过程
  • 高校企业数据挖掘平台推荐
  • uni-app快速入门(六)--rpx尺寸单位与Flex布局
  • C# - 无法加载 DLL“libmupdf.dll”: 找不到指定的模块。
  • 快速排序-java版本
  • 【开源免费】基于Vue和SpringBoot的私人健身与教练预约管理系统(附论文)
  • WTV芯片在智能电子锁语音留言上的应用方案解析
  • 用Python做一个websocket服务端
  • Nvidia 系列显卡大解析 B100、A40、A100、A800、H100、H800、V100 该如何选择,各自的配置详细与架构详细介绍,分别运用于哪些项目场景
  • VMware如何安装img镜像,VMware如何安装openwrt软路由(含相关工具镜像)
  • OceanBase 中常用的查询语句
  • Linux Xterm字体修改
  • IDEA一键启动多个微服务
  • 汽车资讯新视角:Spring Boot技术革新
  • Android 日常使用整理
  • 详解php://filter--理论
  • vue3的attr透传属性详解和使用法方式。以及在css样式的伪元素中实现
  • 2446.学习周刊-2024年46周
  • 深入解析QP算法及其Python实现
  • 沃丰科技智能质检与传统质检的对比
  • linux定时删除2周前的日志文件
  • windows基础二
  • sharding-jdbc自定义分片算法,表对应关系存储在mysql中,缓存到redis或者本地
  • Docker nginx容器高可用(Keepalived)