【vue2.0进阶】案例:用Vuex实现一个简单的计算器 |
您所在的位置:网站首页 › 简易计算器的做法 › 【vue2.0进阶】案例:用Vuex实现一个简单的计算器 |
昨天我们学习了Veux的几个重要的核心概念。当然只讲概念还不够,必须要结合上案例才能理解得更深刻。 马上就开始我们今天的案例:用Vuex实现一个简单的网页计算器。
我们之前的章节说过,Vuex适合在较为大型复杂的项目中使用。在实际开发过程中,简单的计算器也许只算得上是一个简单的小项目,你完全可以不用Vuex来实现。所以,以下我们演示的案例只作为demo来讲解Vuex,让大家能够轻松地搞懂Vuex的用法,不代表在实际开发中的做法。
我们先看看我们要实现的简单计算器的效果: (我是gif,加载有点慢) 此计算器的功能包括了简单的加、减、乘、除运算,和一个清空数据的按钮。
项目分析 分析一:考虑到运算的结果result和所有输入的值enter(看下图指示),是跟每个组件相关联的,我们会将result和enter作为应用层的状态(全局数据)处理,这里就会简单使用到我们的Vuex提供的仓库store。 分析二:每个键盘的按键,我们可以封装成一个个自定义的组件: (看作16个keyboard组件) 简单分析完毕,马上开始我们的代码部分,CSS部分相对简单,不在此展开讲解。 第1步:安装Vuex 老规矩,在项目中安装Vue和Vuex,要保证Vuex在安装之前,Vue已经成功安装。
第2步:创建仓库store //创建仓库store const store = new Vuex.Store({ state:{ result:"",//运算结果 enter:"" //输入的值 } });
我们刚开始分析的时候,把result和enter看作是应用层级的状态,所以定义为仓库store的state对象的属性值来管理它们,初始化为空字符串。
第3步:自定义组件 在Vue2.0基础系列的第九节《掌握vue的另一个核心:组件》 ,我们讲解过如何规划和实现一个自定义的组件,还不了解的同学可以先从前面的章节学起。
可以看到,每个键盘所代表的值不一样。分别从0~9,还有各种运算按键,所以我们要将这些值动态地传入组件内部。 因此:我们可以这样实现 组件。
//自定义组件 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |