对vuex的理解

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 对其进行响应化处理，从而使得这些状态发生变化时，能够通知组件重新渲染。