Vuex 十分简单好用,没用过难免会有神秘感,以致于往往就高估了其使用难度,其实也就那么回事,没什么高大上的。
Vuex 是什么
Vuex 是专门为 Vue.js 设计的状态管理库,它采用集中式存储管理应用的所有组件的状态。
状态管理是什么
状态管理并不是什么神奇的概念,其实你一直都在做,即便你从来没了解过状态管理的概念。
我们先看文档里的示例,一个 Vue 计数应用:
new Vue({
// state
data() {
return {
count: 0
};
},
// view
template: `
<div>{{ count }}</div>
`,
// actions
methods: {
increment() {
this.count++;
}
}
});
这个应用包含以下几个部分:
- state,驱动应用的数据源;
- view,以声明方式将 state 映射到视图;
- actions,响应在 view 上的用户输入导致的状态变化。
这是一个状态自管理应用,状态自管理?可以这样理解,state,view,action,三部分都写在了组件内,状态由应用组件各自管理,即自己的状态自己管理。
而我们常说的状态管理,往往是指外部管理,目的是对状态和组件进行分离,具体到 Vuex 里的表现就是:把应用的所有组件的状态抽取出来,以一个全局单例模式在应用外部采用集中式存储管理。
看来,状态管理并不是新鲜的东西,不过就是把内部对 state 部分的操作,都拿到外部去罢了,事实也确实如此。
为什么需要状态管理
很多人最初喜欢用 Vue,React 这类框架,大概都是因为框架的响应式特性——当数据改变时,视图会进行重新渲染。这其实正是框架解决的最核心的问题。
1. view 显示了 state
2. 用户在 view 上操作,会触发 action 去改变 state
3. state 的改变,导致 view 层再渲染
有没有发现一个有趣的问题,在这个单向流动的过程中,
- 步骤 1 和 步骤 3 已经由 Vue 的响应式特性来做了,我们并不关心其实现细节。
- 步骤 2 是我们参与的地方,这正是状态管理的部分。
既然我们并不关心 view 层是如何自动渲染的,为什么我们不把状态管理和 view 层的代码分离开,分开的好处显而易见,比如我们可以随时换掉 view 层的实现,而不用修改状态管理部分的任何代码,这个理由足够让我们单独对状态进行管理。
为什么需要 Vuex
对于简单的状态管理,一个简单的 store 模式就足够了,官方示例:
var store = {
debug: true,
state: {
message: "Hello!"
},
setMessageAction(newValue) {
if (this.debug) console.log("setMessageAction triggered with", newValue);
this.state.message = newValue;
},
clearMessageAction() {
if (this.debug) console.log("clearMessageAction triggered");
this.state.message = "";
}
};
var vmA = new Vue({
data: {
privateState: {},
sharedState: store.state
}
});
var vmB = new Vue({
data: {
privateState: {},
sharedState: store.state
}
});
- 所有 store 中 state 的改变,都放置在 store 自身的 action 中去管理。这种集中式状态管理能够被更容易地理解哪种类型的 mutation 将会发生,以及它们是如何被触发。当错误出现时,我们现在也会有一个 log 记录 bug 之前发生了什么。
- 此外,每个实例/组件仍然可以拥有和管理自己的私有状态:
接着我们继续延伸约定,
- 组件不允许直接修改属于 store 实例的 state,而应执行 action 来分发 (dispatch) 事件通知 store 去改变
这其实已经是 Flux 架构,这样约定的好处是,我们能够记录所有 store 中发生的 state 改变,同时实现能做到记录变更 (mutation)、保存状态快照、历史回滚/时光旅行的先进的调试工具。
Vuex 正是借鉴了 Flux、Redux 等,为了更好地在组件外部管理状态,显然我们需要 Vuex。
Flux 架构就像眼镜
Flux 架构就像眼镜:您自会知道什么时候需要它。
近视了就需要戴眼镜了,近视 100 度你可能不需要,200 度你可能也不需要,不要着急,总有一个度数会让你带上它。