前言

笔者希望本篇博客的阅读者是使用过Vuex的开发者。看该篇博客的目的是学会表达。

基础

Vuex是什么

这个问题呢,我们不急着解答。先看看 官方文档 怎么讲


Vuex 是什么?
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。


文档上声明,Vuex是一种状态管理模式。但是我们直接告诉面试官这是状态管理模式,面试官肯定一脸懵。所以我建议这样回答。

Vuex是一种状态管理模式,存在的目的是共享可复用的组件状态。

Vuex有几种属性,它们存在的意义分别是什么

有五种,分别是 StateGetterMutationActionModule

State


Vuex 使用单一状态树——是的,用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (SSOT)”而存在。这也意味着,每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段,在调试的过程中也能轻易地取得整个当前应用状态的快照。


State属性是Vuex的单一状态树

Getter


有时候我们需要从 store 中的 state 中派生出一些状态,例如对列表进行过滤并计数


Getter类似于Vue的 computed 对象。是根据业务逻辑来处理State,使得生成业务所需的属性。

Mutation


更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。


Mutation是唯一用来更改Vuex中状态的方法。

Action


Action 类似于 mutation,不同在于:
Action 提交的是 mutation,而不是直接变更状态。
Action 可以包含任意异步操作。


Action是用来解决异步操作而产生的,它提交的是Mutation。

Module


由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。
为了解决以上问题,Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割


Module是将Vuex模块化的对象,目的是更好的维护。

不使用Vuex会带来什么问题

Vuex存在的目的是共享状态。如果不使用Vuex,那么该集中管理的状态就会变成分布管理,会导致可维护性下降。

进阶

前面我们已经学习了基础面试题的表达,现在我们要再接再厉,学习进阶面试题。

module加namespace有什么作用


命名空间
默认情况下,模块内部的 action、mutation 和 getter 是注册在全局命名空间的——这样使得多个模块能够对同一 mutation 或 action 作出响应。
如果希望你的模块具有更高的封装度和复用性,你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后,它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。


vuex中的namespace类似于vue脚手架封装的scoped,目的是私有化属性。

这里有延伸部分


在带命名空间的模块内访问全局内容(Global Assets)
如果你希望使用全局 state 和 getter,rootState 和 rootGetters 会作为第三和第四参数传入 getter,也会通过 context 对象的属性传入 action。
若需要在全局命名空间内分发 action 或提交 mutation,将 { root: true } 作为第三参数传给 dispatch 或 commit 即可。


类似于

dispatch('someOtherAction', null, { root: true }) // -> 'someOtherAction'

什么类型的数据应该放到vuex里面,什么类型的不放?

多个组件共享的状态适合放到vuex里去。

从store里拿数据和getters拿数据有什么区别? getters存在的意义是什么?

单从计算数据来看没什么区别,但是getters 可以在多组件之间复用。

简述vuex中使用异步操作的流程

在组件内使用dispatch触发Action方法。Action调用Mutation方法。Mutation再改变state状态。