专栏首页web前端教室Vuex开发简单的购物车(1)

Vuex开发简单的购物车(1)

今天使用Vuex,来制作一个简单的购物车,

大概需要2、3次课的时间,

主要是通过它来掌握Vuex的基本使用原理。

vue-cli来开发的,

也使用了 bootstrap ,来做为它的ui的界面。

<!-- -->

先安装配置我们的开发环境,

先确定npm、node的版本,

(1)、首先全局安装你的vue-cli,

npm install vue-cli -g

(2)、初始化我的项目目录,

vue init webpack

<!--

Vuex是什么?

-->

官网对它的定义是,“它是一个专门为了vueJs的应用程序开发的状态管理模式”。

也就是说,它是一种写法,一种用法,一种方法,一种思路,而不是一种新的技术。

它是采用集中式的存储,把它所管理的所有的vue组件的状态,

并以相应的规则来保证状态,以一种可以预测的方式发生变化。

<!-- 大白话翻译一下, -->

集中式存储,就是把所有的vue组件的状态都放在一个地方。

什么叫状态啊?

组件的状态,就是组件的数据,先就这么理解没什么大问题。虽然不太准确。

什么地方啊?就是全局大变量的套路。

<!-- -->

说,一切工具都是为了需求而服务的。

现在看来,vuex它就是为管理状态(数据)而存在的。

状态?

你把门打开,门的状态从关0,到开1。

你把开关从横转到竖,开关的状态0,从横到竖1。

你在网上拖动一个按钮,它的x坐标发生了变化,从0到100。

这个状态,就是它现在是什么样?

这个“什么样”,是以数据的形式来体现的。

状态的改变,是因为我们的行为改变了它的外观。

反过来说,就是事物的表现层,对我们的action做出了反馈。

即,在vue中,改变了组件的状态,就是改变了组件的外观。

以上这一大段描述,都是我个人主观的理解,

未必在细节上完成正确,但大方向应该不错。

<!-- -->

vuex它是怎么管理状态的呢?

Vuex使用 Store 对象,来保存和管理整个应用的状态。

<!-- Store,它就是一个全局大变量 -->

它包含以下对象,

- state,存放状态,保存数据

- getters state的计算属性

获取数据

- mutations 更改状态的逻辑,

是一些操作数据的js逻辑

- actions

就是触发的事件,

同步:action.commit()

异步:action.dispatch()

<!-- -->

官方的说法,

- state,驱动应用的数据源,(所有状态保存在这)

- view,以声明的方式state映射到视图,

<!-- (改变状态,引起表现层变化) -->

- actions,响应在view上的用户的输入导致的状态的变化,

其实就是事件改变状态,

<!-- 因为vue-cli今天安装的特别慢,今天就先这么多 -->

本文分享自微信公众号 - web前端教室(webfeel)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-11-12

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • html5- canvas可拖动的曲线“视频教程”

    重 点 bezierCurveTo()方法,即三次贝塞尔曲线方法 此方法需要三个点, 前两个点是用于三次贝塞尔计算中的控制点 第三个点是曲线的结束点。 bezi...

    web前端教室
  • 比找不到工作更可怕的,是你根本就没有职场竞争力

    想找个前端开发的工作,sorry,你根本就没有竞争力。任何一份前端工作,只要有第二个候选人,那么入选者一定不是你。 想想看,这是多么可怕的场景。 <!-- -...

    web前端教室
  • 看太多简单易懂的教程,对你没有好处

    太难的教程看不懂,那只能看一些简单的了。简单的教程,它也是教程啊,那为什么看了许多简单的教程,却依然没什么进步? 其实原因很简单,因为简单的教程之所以简单,是因...

    web前端教室
  • DAY35:阅读流程控制语句

    GPUS Lady
  • 手把手教 Vue-环境搭建

    1 教程简介 1、阅读对象 本篇教程适合新手阅读,老手直接略过 2、教程难度 初级,本人水平有限,文章内容难免会出现问题,如果有问题欢迎指出,谢谢 3、Demo...

    企鹅号小编
  • 机器性能分析将OEM专长引入生产商数字环境

    凭借多数据源数据统筹能力及机器学习技术,工业物联网(IIoT)将企业整体的信息可用性大幅提升。然而,除非是机器专家获得这些信息,否则强大的机器信息就得不到充分利...

    企鹅号小编
  • SAP 如何获取生产订单状态信息

    前面已经介绍了生产订单的几种状态,在程序二次开发时,往往需要获取生产订单状态信息,订单状态取数逻辑如下:

    用户5495712
  • 如何构建一台属于自己的基站?

    ? 上周我去特拉维夫(Tel Aviv)探望我的朋友结果有了一些收获,一块崭新的BladeRF(x40),即一个支持USB3.0的SDR平台,这就意味着可以同...

    FB客服
  • 使用Java客户端对Redis进行操作

      上篇文章我们介绍了如何在centos7下面进行安装单机版redis以及redis集群。这篇文章,我们来聊一聊如何使用java客户端来进行操作redis。我们...

    阿豪聊干货
  • [译] 弄明白JS中的delete操作符

    这个方法常常被用来移除一些对象中的特定的属性. 如果属性本身是不可变更的, 那么它将抛出一个错误.

    腾讯IVWEB团队

扫码关注云+社区

领取腾讯云代金券