前言
笔者希望本篇博客的阅读者是使用过Vuex的开发者。看该篇博客的目的是学会表达。
基础
Vuex是什么
这个问题呢,我们不急着解答。先看看 官方文档 怎么讲
Vuex 是什么?
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
文档上声明,Vuex是一种状态管理模式。但是我们直接告诉面试官这是状态管理模式,面试官肯定一脸懵。所以我建议这样回答。
Vuex是一种状态管理模式,存在的目的是共享可复用的组件状态。
Vuex有几种属性,它们存在的意义分别是什么
有五种,分别是 State、 Getter、Mutation 、Action、 Module。
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状态。