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今天安装的特别慢，今天就先这么多 -->