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)

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

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏服务端技术杂谈

进程内缓存使用技术方案

进程内缓存可以采用带锁的Map或者第三方库,或者自己实现进程内缓存管理,如ConcurrentHashMap,ThreadLocal,guava cache等。

2483
来自专栏python3

清理Linux内存

因为LINUX的内核机制,一般情况下不需要特意去释放已经使用的cache。这些cache起来的内容可以增加文件以及的读写速度。

2671
来自专栏小李刀刀的专栏

Laravel 5.5 在浏览器中渲染 Mailable 类型

Laravel 框架中提供了很方便快捷的面向对象风格的电子邮件相关功能,可以通过 Markdown 语法、Blade 模板引擎来制作邮件模板,然后通过扩展 Ma...

3785
来自专栏云计算与大数据

研发:git flow 研发工作流程

git flow命令仓库:https://github.com/heidsoft/gitflow

1423
来自专栏Java成神之路

Java企业微信开发_07_总结一下企业微信的配置

1192
来自专栏杨建荣的学习笔记

闪回区空间不足引发的SQL问题分析(r10笔记第32天)

有一天上班的时候,收到一封报警邮件。 ZABBIX-监控系统: ------------------------------------ 报警内容: ar...

3547
来自专栏从零开始学自动化测试

Appium+python自动化22-Android夜神模拟器

前言 Android SDK虽然也自带了模拟器,但是那速度会让你怀疑人生,并且不稳定经常卡死异常。夜神模拟器可以说是android模拟器里面的一个神器。 ...

7233
来自专栏应兆康的专栏

Processon 免费在线流程图

4546
来自专栏小狼的世界

Ubuntu下安装IE

做网页开发,IE是不可忽视的用户群体,所以需要在Linux下也有IE才能方便调试,下面是安装步骤:

2983
来自专栏开源优测

AutoLink开源平台源码组织结构

AutoLink是一个基于Python + Flask + RobotFramework开发的web IDE模式的自动化测试开源平台。

1523

扫码关注云+社区

领取腾讯云代金券