Vuex的核心概念和原理介绍

一.介绍

1.1 Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window)，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

1.2 Vue.js 是什么

Vue (读音 /vjuː/，类似于view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

1.3 声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

<divid="app">{{message}}</div>

varapp=newVue({el:'#app',data:{message:'你好Vue!'}})

你好Vue!

我们已经成功创建了第一个 Vue 应用！看起来这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。我们要怎么确认呢？打开你的浏览器的 JavaScript 控制台 (就在这个页面打开)，并修改app.message的值，你将看到上例相应地更新。

注意我们不再和 HTML 直接交互了。一个 Vue 应用会将其挂载到一个 DOM 元素上 (对于这个例子是#app) 然后对其进行完全控制。那个 HTML 是我们的入口，但其余都会发生在新创建的 Vue 实例内部。

除了文本插值，我们还可以像这样来绑定元素 attribute：

<divid="app-2"><spanv-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span></div>

varapp2=newVue({el:'#app-2',data:{message:'页面加载于'+newDate().toLocaleString()}})

这里我们遇到了一点新东西。你看到的v-bindattribute 被称为指令。指令带有前缀v-，以表示它们是 Vue 提供的特殊 attribute。可能你已经猜到了，它们会在渲染的 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的titleattribute 和 Vue 实例的messageproperty 保持一致”。

如果你再次打开浏览器的 JavaScript 控制台，输入app2.message = '新消息'，就会再一次看到这个绑定了titleattribute 的 HTML 已经进行了更新。

二.Vuex的五个核心概念

2.1 state 单一状态树

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

2.1.1 在Vue组件中获得Vuex状态

由于Vuex的状态存储是响应式的，从store实例中读取状态最简单的方法就是在计算属性中返回某个状态。

//创建一个Counter组件constCounter={template:`<div>{{count}}</div>`,computed:{count(){returnstore.state.count}}}

每当store.state.count变化的时候, 都会重新求取计算属性，并且触发更新相关联的DOM。 然而，这种模式导致组件依赖全局状态单例。在模块化的构建系统中，在每个需要使用state的组件中需要频繁地导入，并且在测试组件时需要模拟状态。 Vuex通过store选项，提供了一种机制将状态从根组件“注入”到每一个子组件中（需调用 Vue.use(Vuex)）。

constapp=newVue({el:'#app',//把store对象提供给“store”选项，这可以把store的实例注入所有的子组件store,components:{Counter},template:`<divclass="app"><counter></counter></div>`})

通过在根实例中注册store选项，该store实例会注入到根组件下的所有子组件中，且子组件能通过this.$store访问到。

constCounter={template:`<div>{{count}}</div>`,computed:{count(){returnthis.$store.state.count}}}

2.1.2 mapState辅助函数

当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用mapState辅助函数帮助我们生成计算属性。

//在单独构建的版本中辅助函数为Vuex.mapStateimport{mapState}from'vuex'exportdefault{//...computed:mapState({//箭头函数可使代码更简练count:state=>state.count,//传字符串参数'count'等同于`state=>state.count`countAlias:'count',//为了能够使用`this`获取局部状态，必须使用常规函数countPlusLocalState(state){returnstate.count+this.localCount}})}

当映射的计算属性的名称与state的子节点名称相同时，我们也可以给mapState传一个字符串数组。

computed:mapState([//映射this.count为store.state.count'count'])

2.1.3 对象展开运算符

mapState函数返回的是一个对象。我们如何将它与局部计算属性混合使用呢？通常，我们需要使用一个工具函数将多个对象合并为一个，以使我们可以将最终对象传给computed属性。但是自从有了对象展开运算符，我们可以极大地简化写法：

varapp=newVue({el:'#app',data:{message:'你好Vue!'}})0

2.2 geeter

从基本数据(state)派生的数据，相当于state的计算属性. 有时候我们需要从store中的state中派生出一些状态，例如对列表进行过滤并计数：

varapp=newVue({el:'#app',data:{message:'你好Vue!'}})1

如果有多个组件需要用到此属性，我们要么复制这个函数，或者抽取到一个共享函数然后在多处导入它——无论哪种方式都不是很理想。 Vuex允许我们在store中定义“getter”（可以认为是store的计算属性）。就像计算属性一样，getter的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。 Getter接受state作为其第一个参数：

varapp=newVue({el:'#app',data:{message:'你好Vue!'}})2

2.2.1 通过属性访问

Getter会暴露为store.getters对象，你可以以属性的形式访问这些值：

varapp=newVue({el:'#app',data:{message:'你好Vue!'}})3

Getter也可以接受其他getter作为第二个参数：

varapp=newVue({el:'#app',data:{message:'你好Vue!'}})4

varapp=newVue({el:'#app',data:{message:'你好Vue!'}})5

我们可以很容易地在任何组件中使用它：

varapp=newVue({el:'#app',data:{message:'你好Vue!'}})6

注意，getter在通过属性访问时是作为Vue的响应式系统的一部分缓存其中的。

2.2.2 通过方法访问

你也可以通过让getter返回一个函数，来实现给getter传参。在你对store里的数组进行查询时非常有用。

varapp=newVue({el:'#app',data:{message:'你好Vue!'}})7

varapp=newVue({el:'#app',data:{message:'你好Vue!'}})8

注意，getter在通过方法访问时，每次都会去进行调用，而不会缓存结果。

2.2.3 mapGetters辅助函数

mapGetters辅助函数仅仅是将store中的getter映射到局部计算属性：

varapp=newVue({el:'#app',data:{message:'你好Vue!'}})9

如果你想将一个getter属性另取一个名字，使用对象形式：

你好Vue!0

2.3 Mutation

更改Vuex的store中的状态的唯一方法是提交mutation。Vuex中的mutation非常类似于事件：每个mutation都有一个字符串的事件类型(type)和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受state作为第一个参数：

你好Vue!1

你不能直接调用一个mutation handler。这个选项更像是事件注册：“当触发一个类型为increment的mutation时，调用此函数。”要唤醒一个mutation handler，你需要以相应的type调用store.commit方法：

你好Vue!2

2.3.1 提交载荷（Payload）

你可以向store.commit传入额外的参数，即mutation的载荷（payload）：

你好Vue!3

在大多数情况下，载荷应该是一个对象，这样可以包含多个字段并且记录的mutation会更易读：

你好Vue!4

2.3.2 对象风格的提交方式

提交mutation的另一种方式是直接使用包含type属性的对象：

你好Vue!5

当使用对象风格的提交方式，整个对象都作为载荷传给mutation函数，因此handler保持不变：

你好Vue!6

2.3.3 Mutation需遵守Vue的响应规则

既然Vuex的store中的状态是响应式的，那么当我们变更状态时，监视状态的Vue组件也会自动更新。这也意味着Vuex中的mutation也需要与使用Vue一样遵守一些注意事项：

最好提前在你的store中初始化好所有所需属性。

当需要在对象上添加新属性时，你应该使用 Vue.set(obj, 'newProp', 123), 或者以新对象替换老对象。例如，对象展开运算符我们可以这样写：

你好Vue!7

2.3.4 使用常量替代Mutation事件类型

使用常量替代mutation事件类型在各种Flux实现中是很常见的模式。这样可以使linter之类的工具发挥作用，同时把这些常量放在单独的文件中可以让你的代码合作者对整个 app包含的mutation一目了然：

你好Vue!8

2.3.5 Mutation必须是同步函数

一条重要的原则就是要记住mutation必须是同步函数。

你好Vue!9

现在想象，我们正在debug一个app并且观察devtool中的mutation日志。每一条mutation被记录，devtools都需要捕捉到前一状态和后一状态的快照。

然而，在上面的例子中mutation中的异步函数中的回调让这不可能完成：因为当mutation触发的时候，回调函数还没有被调用，devtools不知道什么时候回调函数实际上被调用——实质上任何在回调函数中进行的状态的改变都是不可追踪的。

2.3.6 在组件中提交Mutation

你可以在组件中使用this.$store.commit('xxx')提交mutation，或者使用mapMutations辅助函数将组件中的methods映射为store.commit调用（需要在根节点注入store）。

import{mapMutations}from'vuex'exportdefault{//...methods:{...mapMutations(['increment',//将`this.increment()`映射为`this.$你好Vue!2`//`mapMutations`也支持载荷：'incrementBy'//将`this.incrementBy(amount)`映射为`this.$store.commit('incrementBy',amount)`]),...mapMutations({add:'increment'//将`this.add()`映射为`this.$你好Vue!2`})}}

2.3.6 下一步：Action

在mutation中混合异步调用会导致你的程序很难调试。例如，当你调用了两个包含异步回调的mutation来改变状态，你怎么知道什么时候回调和哪个先回调呢？这就是为什么我们要区分这两个概念。在Vuex中，mutation都是同步事务：

你好Vue!2//任何由"increment"导致的状态变更都应该在此刻完成。

2.4 Action

Action类似于mutation，不同在于：

Action提交的是mutation，而不是直接变更状态。

Action可以包含任意异步操作。

让我们来注册一个简单的 action：

<divid="app-2"><spanv-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span></div>2

Action函数接受一个与store实例具有相同方法和属性的context对象，因此你可以调用 context.commit 提交一个mutation，或者通过context.state和context.getters来获取 state和getters。 实践中，我们会经常用到ES2015的参数解构来简化代码（特别是我们需要调用commit很多次的时候）：

<divid="app-2"><spanv-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span></div>3

2.4.1 分发Action

Action通过store.dispatch方法触发：

<divid="app-2"><spanv-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span></div>4

乍一眼看上去感觉多此一举，我们直接分发mutation岂不更方便？实际上并非如此，还记得mutation必须同步执行这个限制么？Action就不受约束！我们可以在action内部执行异步操作：

<divid="app-2"><spanv-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span></div>5

Actions支持同样的载荷方式和对象方式进行分发：

<divid="app-2"><spanv-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span></div>6

来看一个更加实际的购物车示例，涉及到调用异步API和分发多重mutation：

<divid="app-2"><spanv-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span></div>7

注意我们正在进行一系列的异步操作，并且通过提交mutation来记录action产生的副作用（即状态变更）。

2.4.2 在组件中分发Action

你在组件中使用this.$store.dispatch('xxx')分发action，或者使用mapActions辅助函数将组件的methods映射为store.dispatch 调用（需要先在根节点注入store）：

import{mapActions}from'vuex'exportdefault{//...methods:{...mapActions(['increment',//将`this.increment()`映射为`this.$<divid="app-2"><spanv-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span></div>4`//`mapActions`也支持载荷：'incrementBy'//将`this.incrementBy(amount)`映射为`this.$store.dispatch('incrementBy',amount)`]),...mapActions({add:'increment'//将`this.add()`映射为`this.$<divid="app-2"><spanv-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span></div>4`})}}

2.4.3 组合Action

Action通常是异步的，那么如何知道action什么时候结束呢？更重要的是，我们如何才能组合多个action，以处理更加复杂的异步流程？ 首先，你需要明白store.dispatch可以处理被触发的action的处理函数返回的Promise，并且store.dispatch仍旧返回Promise：

<divid="app-2"><spanv-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span></div>9

现在你可以：

varapp2=newVue({el:'#app-2',data:{message:'页面加载于'+newDate().toLocaleString()}})0

在另外一个action中也可以：

varapp2=newVue({el:'#app-2',data:{message:'页面加载于'+newDate().toLocaleString()}})1

最后，如果我们利用async / await，我们可以如下组合action：

varapp2=newVue({el:'#app-2',data:{message:'页面加载于'+newDate().toLocaleString()}})2

一个 store.dispatch 在不同模块中可以触发多个action函数。在这种情况下，只有当所有触发函数完成后，返回的 Promise 才会执行。

2.5 modules

模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。 使用下面这两种方法存储数据： dispatch：异步操作，写法： this.$store\mathrm{.}dispatch{(}^{\mathrm{\prime }}mutations\text{方法}{\text{名}}^{\mathrm{\prime }},\text{值})commit\text{：同步操作，写法：}this\mathrm{.}$store.dispatch(′mutations方法名′,值)commit：同步操作，写法：this.store.commit('mutations方法名',值)

varapp2=newVue({el:'#app-2',data:{message:'页面加载于'+newDate().toLocaleString()}})3

三.Vuex的好处

3.1 能够在vuex中集中管理共享的数据,易于开发和后期的维护；

3.2 能够高效的实现组件间的数据共从而提高开发效率；

3.3 存储在vuex中的数据都是响应的能够实时保持数据页面的共享同步。

作者：在路上lx著作权归作者所有。