【vue2.0进阶】案例：用Vuex实现一个简单的计算器
昨天我们学习了Veux的几个重要的核心概念。当然只讲概念还不够，必须要结合上案例才能理解得更深刻。
马上就开始我们今天的案例：用Vuex实现一个简单的网页计算器。
我们之前的章节说过，Vuex适合在较为大型复杂的项目中使用。在实际开发过程中，简单的计算器也许只算得上是一个简单的小项目，你完全可以不用Vuex来实现。所以，以下我们演示的案例只作为demo来讲解Vuex，让大家能够轻松地搞懂Vuex的用法，不代表在实际开发中的做法。
我们先看看我们要实现的简单计算器的效果：
（我是gif，加载有点慢）
此计算器的功能包括了简单的加、减、乘、除运算，和一个清空数据的按钮。
项目分析
分析一：考虑到运算的结果result和所有输入的值enter（看下图指示），是跟每个组件相关联的，我们会将result和enter作为应用层的状态（全局数据）处理，这里就会简单使用到我们的Vuex提供的仓库store。
分析二：每个键盘的按键，我们可以封装成一个个自定义的组件: <keyboard/>
（看作16个keyboard组件）
简单分析完毕，马上开始我们的代码部分，CSS部分相对简单，不在此展开讲解。
第1步：安装Vuex
老规矩，在项目中安装Vue和Vuex，要保证Vuex在安装之前，Vue已经成功安装。
<script src="js/vue.js"></script>
<script src="js/vuex.js"></script>
第2步：创建仓库store
//创建仓库store
const store = new Vuex.Store({
state:{
result:"",//运算结果
enter:"" //输入的值
}
});
我们刚开始分析的时候，把result和enter看作是应用层级的状态，所以定义为仓库store的state对象的属性值来管理它们，初始化为空字符串。
第3步：自定义组件<keyboard/>
在Vue2.0基础系列的第九节《掌握vue的另一个核心：组件》 ，我们讲解过如何规划和实现一个自定义的组件，还不了解的同学可以先从前面的章节学起。
可以看到，每个键盘所代表的值不一样。分别从0~9，还有各种运算按键，所以我们要将这些值动态地传入组件内部。
因此：我们可以这样实现 <keyboard/> 组件。
//自定义组件
Vue.component('keyboard',{
//接受的参数value，代表键盘的值
props:['value'],
//模板
template:`<div
:data-value="value">
{{value}}
</div>`
});
我们添加了一个动态的属性data-value，后面我们会使用到它。
有了组件，我们就可以编写我们的页面Html的代码，并使用这个 <keyboard/> 组件。
第4步：页面布局
<div id="app">
<div class="result">运算结果</div>
<div class="enter">输入的值</div>
<div class="keys">
<div class="list">
<!--键盘区域-->
</div>
</div>
</div>
第5步：创建Vue实例。
要使用Vue，就必须创建一个Vue实例。
//创建Vue实例
const app = new Vue({
//挂载元素
el:"#app",
});
通过以上5步，我们做了以下准备：
1. 安装了Vue和Vuex
2. 创建了仓库store
3. 定义了键盘组件 <keyboard/>
4. 页面的布局
5.创建了Vue实例
但貌似距离实现我们的计算器，是否还有点距离。
接下来我们一步一步完善以上的代码，将这4部分关联起来，实现完整的计算器。
首先，我们的键盘区域还没有完善，我们先来实现它。
<div class="list">
<!--键盘区域，还没实现-->
</div>
16个按键的值我们会事先定义好，放在Vue实例的data中，所以我们将Vue实例的代码修改如下：
//创建Vue实例
const app = new Vue({
//挂载元素
el:"#app",
data:{
//16个按键的值
keys:[
'clear', '+', '-', '*',
'7', '8', '9', '/',
'4', '5', '6', '0',
'1', '2', '3', '=',
]
}
});
有了这16个值，我们利用vue提供的v-for指令和 <keyboard/> 组件，实现键盘区域的渲染。
我们对页面中的键盘区域部分代码进行修改。
修改前：
<div class="list">
<!--键盘区域-->
</div>
修改后：
<div class="list">
<keyboard
v-for="item in keys"
:value="item">
</keyboard>
</div>
我们通过 v-for 指令，将keys中的每一个值动态地传入到 <keyboard/> 组件中去。
结合我们事先写好的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经常会被 <keyboard/> 组件操作更新，所以我们这里需要使用Vue的computed计算属性。
所以，我们给Vue实例增加计算属性，增加一下代码：
//创建Vue实例
const app = new Vue({
//.....其他代码不变....///
//增加计算属性
computed:{
result(){
//通过this.$store获取仓库的数据result
return this.$store.state.result;
},
enter(){
//通过this.$store获取仓库的数据result
return this.$store.state.enter;
}
}
});
我们成功地将仓库的状态result和enter关联到了我们的实例中的计算属性result和enter，这样，每当仓库中的运算结果result和输入值enter发生了变化，实例中的计算属性result和enter也会做出响应式更新。
我们把计算属性result和enter绑定在html上，来渲染我们的页面。修改的部分如下，修改前：
<div class="result">运算结果</div>
<div class="enter">输入的值</div>
修改后：
<div class="result">
<!--绑定计算属性result-->
{{ result }}
</div>
<div class="enter">
<!--绑定计算属性enter-->
{{ enter === ""?0:enter}}
</div>
由于业务需要，输入的值默认为0，所以我们做了简单的三元运算，当ente为空字符串的时候，我们在页面上显示：0。
我们此时看到的页面效果：
（效果图）
似乎离我们的计算器越来越近了，但我们点击任意一个键盘的时候，似乎还没有任何反应。
接下来，我们就来完成最后一步：点击键盘，对仓库store的状态result和enter进行修改。
我们上一节说过，在Vuex中不能任意修改应用层的状态，要修改，就得用它提供的唯一途径：通过commit提交mutation。
没问题，提交就提交嘛，那还不简单。
当用户点击键盘的时候，我们就提交一个mutation，并把当前按的键的值传过去。为此，我们修改 <keyboard/> 组件的代码。
修改后如下：
//定义组件
Vue.component('keyboard',{
props:['value'],
//点击事件的监听处理getKeyboardValue
template:`<div
@click="getKeyboardValue"
:data-value="value">
{{value}}
</div>`,
methods:{
//点击事件处理函数
getKeyboardValue(event){
//获取当前的按键的值
let value=event.target.dataset.value;
//通过commit提交mutation
this.$store.commit('calculate',value)
}
}
});
增加了监听点击事件的处理函数getKeyboardValue，我们会提交一个名为calculate的mutation给仓库，并将当前按键的值一起提交过去。
哦，别忘了，我们的仓库还没有定义名为calculate的mutations，赶紧去定义一个。
我们将仓库store的代码完善一下。修改后，如下：
//创建仓库store
const store = new Vuex.Store({
state:{
result:"",
enter:""
},
//定义名为calculate的mutation
mutations:{
calculate(state,value){
if(value === '='){
//按键的值为=，进行结果计算
state.result = eval(state.enter);
state.enter += value;
}else if(value === 'clear'){
//按键的值为clear，清空数据
state.result = state.enter = "";
}else{
//输入结果enter进行拼接
state.enter += value;
}
}
}
});
这样，我们就实现了点击 <keyboard/> 组件，修改仓库store中的状态，由于Vue实例的计算属性是依赖仓库store的状态的，所以一旦状态被修改，计算属性就会重新计算，从而更新视图。
看流程图会更加清晰：
（流程图）
我们最后来看看计算器的效果：
（我是gif，加载有点慢）
由于我们的项目中使用了vue，浏览器安装了vue-devtool的同学可以打开控制台，清晰地看到整个计算器应用的组件状态的变化，方便调试。
（vue-devtool面板）
整个案例我们就介绍完了，如果看完云里雾里的话，别慌，这很正常，你必须花时间去敲上几遍代码，才能理解滴更加深刻。
如果对里面的语法还存在不明白的同学，可以再复习我们前面章节的基础知识，这个案例的所有知识在前面的教程中通俗易懂的讲解。
代码，还得多敲，看是看不懂的！
推荐
扩展阅读
原创教程：《ECMAScript 6 系列》
原创教程：《Vue2.0基础系列》
附加习题：《Vue2.0基础系列》的 1 套
关于职场
职场感悟：混口饭吃，谈不上喜欢
薪资待遇：那么点工资，能招到人吗？
郑州招聘：招聘前端3~5人
广州招聘：招聘前端2人
资源推荐
其实学好技术并不难，架构师免费分享全网全套最新web前端、JavaScript、HTML5、PHP、数据库……等视频资料！
[总价值超3万！]年薪35万以上的大牛几乎都看了！
加微信: abc15689892 免费领取，由于领取的朋友比较多，所以加微信时一定要备注：555，否则很难通过。