【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}}