浅谈vuex模拟购物车过程

一、什么是vuex?
      本文是使用vue-cli与bootstrap来进行开发。
      官网对它的定义是：“它是一个专门为了vueJs的应用程序开发的状态管理模式”。也就是说，它是一种写法、用法与思路，而不是说是一种新的技术。
      它是采用集中式的存储，把它所管理的所有的vue组件的状态以相应的规则来保证状态啊，以一种可以预测的方式发生变化。翻译成大白话就是说：“集中式存储就是把所有的vue组件的状态都放在一个地方，组件的状态简单点来讲就是组件的数据”。
      vuex就是为管理状态（数据）存在的，状态的改变就是行为改变了外观。
二、Vuex使用Store对象来保存和管理整个应用的状态。
      它包含四个对象：state(存放状态，保存数据)、getters(state的计算属性，用来获取数据)、mutations(更改状态的逻辑，简单来说就是一些操作数据的js逻辑方法)、actions(触发的事件，同步用action.commit(),异步用action.dispatch())。       

三、本文的目的就是去实现一个简单的购物车功能。

四、开发环境
      1. 全局安装vue-cli: npm install vue-cli -g;

      2. 初始化项目目录： vue init webpack;

      3. 安装依赖：npm install;
      4. 运行：npm run dev;
五、开始我们的项目
      1. 新增一个product文件。

      2. 引入bootstrap。

      3. 安装vuex: npm install vuex --save;
      4. 全局引用Vuex: src目录下新建store文件夹以及index.js文件。

      5. 创建store需要使用的组件模块modules。

      6. 数据传递并渲染。

      利用mapGetters辅助函数将store中getters的数据传入product文件中。

      然后一个store中getters的数据就渲染在了页面上。

      7. 事件映射。
      mapActions辅助函数会将某一方法映射到vuex。
      mapActions可以创建组件方法分发action，第一个参数是可选的，可以是一个命名空间字符串，对象形式的第二个参数的成员可以是一个函数。
      首先需要在product文件中定义一个方法，以mapActions的形式传给vuex。

      然后在store中的actions里设置方法，看是否能调用该方法。

      其次，actions通过commit的方式调用方法，mutations里对commit进行了一个响应，即具体操作方法进行了一个定义。

      这样操作后，添加上自己的一些业务逻辑，那么vuex的基本操作就完成了。

六、结束语
      按照上面的操作流程走下来，会对vuex有一个初步的认识，但是本文的目地在于让各位读者能够清晰直观的学会如何使用vuex模拟购物车的操作流程，因此我会将剩余的代码以图片的形式放在文章中。
      希望各位读者在看完我的这篇文章后能更好更合理的使用vuex状态管理。