前端君 翻身的码农 昨天我们学习了Veux的几个重要的核心概念。当然只讲概念还不够，必须要结合上案例才能理解得更深刻。

马上就开始我们今天的案例：用Vuex实现一个简单的网页计算器。

我们之前的章节说过，Vuex适合在较为大型复杂的项目中使用。在实际开发过程中，简单的计算器也许只算得上是一个简单的小项目，你完全可以不用Vuex来实现。所以，以下我们演示的案例只作为demo来讲解Vuex，让大家能够轻松地搞懂Vuex的用法，不代表在实际开发中的做法。

我们先看看我们要实现的简单计算器的效果：

（我是gif，加载有点慢）

此计算器的功能包括了简单的加、减、乘、除运算，和一个清空数据的按钮。

分析一：考虑到运算的结果result和所有输入的值enter（看下图指示），是跟每个组件相关联的，我们会将result和enter作为应用层的状态（全局数据）处理，这里就会简单使用到我们的Vuex提供的仓库store。

分析二：每个键盘的按键，我们可以封装成一个个自定义的组件: （看作16个keyboard组件）

简单分析完毕，马上开始我们的代码部分，CSS部分相对简单，不在此展开讲解。

老规矩，在项目中安装Vue和Vuex，要保证Vuex在安装之前，Vue已经成功安装。

我们刚开始分析的时候，把result和enter看作是应用层级的状态，所以定义为仓库store的state对象的属性值来管理它们，初始化为空字符串。

在Vue2.0基础系列的第九节《掌握vue的另一个核心：组件》 ，我们讲解过如何规划和实现一个自定义的组件，还不了解的同学可以先从前面的章节学起。

可以看到，每个键盘所代表的值不一样。分别从0~9，还有各种运算按键，所以我们要将这些值动态地传入组件内部。

因此：我们可以这样实现 组件。

我们添加了一个动态的属性data-value，后面我们会使用到它。

有了组件，我们就可以编写我们的页面Html的代码，并使用这个 组件。

要使用Vue，就必须创建一个Vue实例。

通过以上5步，我们做了以下准备：

但貌似距离实现我们的计算器，是否还有点距离。

接下来我们一步一步完善以上的代码，将这4部分关联起来，实现完整的计算器。

首先，我们的键盘区域还没有完善，我们先来实现它。

16个按键的值我们会事先定义好，放在Vue实例的data中，所以我们将Vue实例的代码修改如下：

有了这16个值，我们利用vue提供的v-for指令和 组件，实现键盘区域的渲染。

我们对页面中的键盘区域部分代码进行修改。

修改前：

修改后：

我们通过 v-for 指令，将keys中的每一个值动态地传入到 组件中去。

结合我们事先写好的CSS样式，我们可以看到键盘区域的渲染效果： （效果图）

但是我们也看到，键盘上面的几个中文：“运算结果”和“输入的值”不是我们想要的，我们再来修改它。

你会发现，我们需要的运算结果result和输入的值enter是应用层的状态，它俩被我们定义在了仓库store上。那么问题来了，我们如何将仓库store和vue实例关联起来呢？ Vuex提供了store选项，允许我们将仓库store引入到根组件，并且此跟组件的所有子组件都可以使用到仓库store，而且子组件无需显示的引入。有了这个机制，我们就很方便地将仓库store和vue实例关联起来了。

具体怎么使用呢？很简单，我们将Vue实例的代码修改如下：

//创建Vue实例 const app = new Vue({ //挂载元素 el:"#app", //ES6语法，相当于"store":store store, //.....data部分 不变，此处省略....... });

这样我们就可以将store引入，且能通过 this.$store 访问到它。

好了，引入它之后，我们就来使用state中的应用层的数据result和enter。怎么使用呢？

由于计算结果result和输入值enter经常会被 组件操作更新，所以我们这里需要使用Vue的computed计算属性。

所以，我们给Vue实例增加计算属性，增加一下代码：

我们成功地将仓库的状态result和enter关联到了我们的实例中的计算属性result和enter，这样，每当仓库中的运算结果result和输入值enter发生了变化，实例中的计算属性result和enter也会做出响应式更新。

我们把计算属性result和enter绑定在html上，来渲染我们的页面。修改的部分如下，修改前：

修改后：

由于业务需要，输入的值默认为0，所以我们做了简单的三元运算，当ente为空字符串的时候，我们在页面上显示：0。

我们此时看到的页面效果： （效果图）

似乎离我们的计算器越来越近了，但我们点击任意一个键盘的时候，似乎还没有任何反应。

接下来，我们就来完成最后一步：点击键盘，对仓库store的状态result和enter进行修改。

我们上一节说过，在Vuex中不能任意修改应用层的状态，要修改，就得用它提供的唯一途径：通过commit提交mutation。

没问题，提交就提交嘛，那还不简单。

当用户点击键盘的时候，我们就提交一个mutation，并把当前按的键的值传过去。为此，我们修改 组件的代码。

修改后如下：

增加了监听点击事件的处理函数getKeyboardValue，我们会提交一个名为calculate的mutation给仓库，并将当前按键的值一起提交过去。

哦，别忘了，我们的仓库还没有定义名为calculate的mutations，赶紧去定义一个。

我们将仓库store的代码完善一下。修改后，如下：

这样，我们就实现了点击 组件，修改仓库store中的状态，由于Vue实例的计算属性是依赖仓库store的状态的，所以一旦状态被修改，计算属性就会重新计算，从而更新视图。

看流程图会更加清晰： （流程图）

我们最后来看看计算器的效果： （我是gif，加载有点慢）

由于我们的项目中使用了vue，浏览器安装了vue-devtool的同学可以打开控制台，清晰地看到整个计算器应用的组件状态的变化，方便调试。

（vue-devtool面板）

整个案例我们就介绍完了，如果看完云里雾里的话，别慌，这很正常，你必须花时间去敲上几遍代码，才能理解滴更加深刻。

如果对里面的语法还存在不明白的同学，可以再复习我们前面章节的基础知识，这个案例的所有知识在前面的教程中通俗易懂的讲解。

代码，还得多敲，看是看不懂的！