真正掌握vuex的使用方法(二)

从上篇文章当中相信大家已经对vuex有了一些大概了解了,接下来咱们结合实例来继续敲代码吧!切记一定要动手实操练习一遍!

接下来咱们来完成一个超级简单的投票功能!要求很简单,点击“投票”按钮,相应的票数会发生加1的变化,另外总票数为所有票数之和,如图所示:

1、首先通过vue-cli生成一个名字叫做demo的项目

2、项目搭建完成以后,安装vuex

3、在src目录下创建vuex文件夹,然后在该文件夹下创建一个名字叫做store的js文件

4、在store.js中写入以下代码:

5、在main.js当中引入在store.js文件当中创建的store对象,并在Vue实例中添加

6、修改App.vue为:

7、到现在为止,初始的票数已经被咱们获取到了。

不过有心的你应该已经发现了:当获得vuex状态值的时候代码好长,好啰嗦,好不方便!不过没关系,vuex为伟大的你提供了一种十分简便的方法:

首先在App.vue当中的script内引入vuex

然后在computed计算属性里写如下代码:

再然后修改App.vue的template为:

经过上面的代码调整以后,你会发现调取vuex的状态值简便了不少。

不过设置mapState时也要花费了你一定的脑细胞。

所以咱们可以通过ES6的部分知识来将上面的JS进行一番优化!

首先咱们将引入的vuex那部分修改为:

然后在使用mapSate的时候,咱们就可以省略一级对象(vuex),即computed修改为:

现在有的小伙伴是不是在想,以后如果我要在这里写自己的计算属性怎么办?怎么办?咱们可以通过对象合并的方法去实现。

通过Object.assign()合并对象:

当然也可以用…(扩展运算符)来合并对象

未完等续!

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180519A1GDUU00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券