鹏展博
833字约3分钟
2022-04-25
提问
vuex
的理解此题考察实践能力,对 vuex
的设计理念和实现原理的解读。
vuex
的定义vuex
解决了什么问题vuex
官网定义:
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
vuex
是 vue
官方开源并维护的状态管理库,它以 全局的方式集中管理应用状态,并保证应用状态变更的可预测性。vuex
主要解决的问题是多组件之间状态共享的问题,利用各种组件通信方式,我们虽然能够做到状态共享,但是往往需要在多个组件之间保持状态的一致性,这种模式很容易出现问题,也会使程序逻辑变得复杂。 vuex
通过把组件的共享状态抽取出来,以全局单例模式管理,这样任何组件都能用一致的方式获取和修改状态,响应式的数据也能够保证简洁的单向数据流动,我们的代码将变得更结构化且易维护。vuex
并非必须的,它帮我们管理共享状态,但却带来更多的概念和框架。 如果我们不打算开发大型单页应用或者我们的应用并没有大量全局的状态需要维护,完全没有使用 vuex
的必要。 一个简单的 store
模式就足够了。反之, vuex
将会成为自然而然的选择。 引用 Redux
的作者 Dan Abramov
的话说就是:Flux 架构就像眼镜:您自会知道什么时候需要它。vuex
过程中有如下理解:首先是对核心概念的理解和运用,将全局状态放入 state
对象中, 它本身一棵状态树,组件中使用 store
实例的state访问这些状态; 然后有配套的 mutation
方法修改这些状态,并且只能用 mutation
修改状态, 在组件中调用 commit
方法提交 mutation
;如果应用中有异步操作或者复杂逻辑组合, 我们需要编写 action
,执行结束如果有状态修改仍然需要提交 mutation
, 组件中调用这些 action
使用 dispatch
方法派发。最后是模块化, 通过 modules
选项组织拆分出去的各个子模块,在访问状态时注意添加子模块的名称, 如果子模块有设置 namespace
,那么在提交 mutation
和派发 action
时还需要额外的命名空间前缀。vuex
在实现单项数据流时需要做到数据的响应式,通过源码的学习发现是借用了 vue
的数据响应化特性实现的,它会利用Vue将 state
作为 data
对其进行响应化处理,从而使得这些状态发生变化时,能够通知组件重新渲染。