Vuex 是什么

绍鸣科技3个月前vue78

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

#什么是“状态管理模式”?

让我们从一个简单的 Vue 计数应用开始:

new Vue({
  // state
  data () {
    return {
      count: 0
    }
  },
  // view
  template: `
    <div>{{ count }}</div>  `,
  // actions
  methods: {
    increment () {
      this.count++
    }
  }})

这个状态自管理应用包含以下几个部分:

  • state,驱动应用的数据源;

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

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

以下是一个表示“单向数据流”理念的简单示意:

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

  • 多个视图依赖于同一状态。

  • 来自不同视图的行为需要变更同一状态。

对于问题一,传参的方法对于多层嵌套的组件将会非常繁琐,并且对于兄弟组件间的状态传递无能为力。对于问题二,我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱,通常会导致无法维护的代码。

因此,我们为什么不把组件的共享状态抽取出来,以一个全局单例模式管理呢?在这种模式下,我们的组件树构成了一个巨大的“视图”,不管在树的哪个位置,任何组件都能获取状态或者触发行为!

通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性,我们的代码将会变得更结构化且易维护。

这就是 Vuex 背后的基本思想,借鉴了 FluxRedux 和 The Elm Architecture。与其他模式不同的是,Vuex 是专门为 Vue.js 设计的状态管理库,以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。

如果你想交互式地学习 Vuex,可以看这个 Scrimba 上的 Vuex 课程,它将录屏和代码试验场混合在了一起,你可以随时暂停并尝试。

vuex

#什么情况下我应该使用 Vuex?

Vuex 可以帮助我们管理共享状态,并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。

如果您不打算开发大型单页应用,使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单,您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是,如果您需要构建一个中大型单页应用,您很可能会考虑如何更好地在组件外部管理状态,Vuex 将会成为自然而然的选择。引用 Redux 的作者 Dan Abramov 的话说就是:

Flux 架构就像眼镜:您自会知道什么时候需要它。


相关文章

Vue 3.0已进入发布候选阶段!

Vue 3.0已进入发布候选阶段!

Vue正在彻底检查中,Vue 3.0已进入发布候选阶段!这已经持续了近两年,并且终于,Vue 3核心API的实现现在稳定了。令人兴奋的原因有很多。Vue 3有比Vue 2具有更高的性能。尽管进行了完全...

前端面试题整理—Vue篇

前端面试题整理—Vue篇

1、对vue的理解,有什么特点,vue为什么不能兼容IE8及以下浏览器  vue是一套用于构建用户界面的渐进式框架,核心是一个响应的数据绑定系统  vue是一款MVVM框架,基于双向绑定数据,当数据发...

前端之vue面试题

前端之vue面试题

1、active-class是哪个组件的属性?嵌套路由怎么定义?答:vue-router模块的router-link组件。2、怎么定义vue-router的动态路由?怎么获取传过来的动态参数?答:在r...

为什么 Vue 更符合这个时代的大势所趋一

为什么 Vue 更符合这个时代的大势所趋一

不久前,尤雨溪发布了 Vue 3.0 Beta 版本。发布之后我们对社区里的前端开发者做了一次调查沟通,大家普遍认为 Vue 已经具备了商业项目开发的必备条件,如语法精炼、优雅而简洁、代码的可读性高、...

为什么 Vue 更符合这个时代的大势所趋三

为什么 Vue 更符合这个时代的大势所趋三

Vue —— 契合当下的大势所趋我们已经在过去无数次尝试使用 Vue 为不同的项目开发了很多代码,结果也很令人满意(每个项目周期不超过 3 个月)。也许,3 个月对于后端开发来说算不上什么,但在JS世...

为什么 Vue 更符合这个时代的大势所趋二

为什么 Vue 更符合这个时代的大势所趋二

一、门槛低、上手快Vue 上手简单的原因是无需复杂配置,只需要一个 HTML 与相关文件就能跑起来。从设计的角度上来看,Vue 考虑的也是如何降低门槛,让只掌握了 Web 基础知识 (HTML, CS...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。