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