小白角度理解VUEX（包含理解，demo和小项目）
2018-02-14 本文已影响0人
HLE
前言：
刚开始学习vuex的时候，看文档，博客和视频，感觉一脸懵逼，感觉没得到什么帮助。现在又重新开始，就不信搞不懂。
这篇文章就是以我这样一个小白的角度手把手的讲解我对vuex的：1.理解； 2.demo; 3.记事本的项目。
在这，附上demo和项目的源码地址，如果需要就去看看，如果觉得得到帮助麻烦给颗星星
正文开始了：
1.使用vuex的原因：
项目中会有多个组件共同依赖一个状态，并且这回组件中的操作会共同改变这个状态。这样就会很混乱，所以就要使用vuex把多个组件共享的状态抽出来，统一管理，这样就方便很多，而且很清晰。
2.说说vuex都有啥：
每一个 Vuex 应用的核心就是 store，里面又包括:
1.state(用来存放数据源，就是公共状态)；
2.actions(存放要执行的操作，相当于事件)；
3.mutations(变换，对state进行状态改变)。
所以，一个完整操作流程就是：
用户在组件中的操作(例如单击按钮)===>actions commit到mutations===>mutations中对state进行变换===>变换后的state返回到组件渲染更新
3.简单demo体会一下vuex工作流程
1）第一步：安装vuex
在项目根目录下执行：cnpm install vuex -D
先来看看demo的效果：
demo效果图
2）第二步：在组件中执行操作请求改变状态
组件事件触发请求
3）第三步：mapActions 工具函数会将 store 中的 dispatch 方法映射到组件的 methods 中
mapActions
4)第四步:action去commit mutations
actions
5)第五步：mutation来改变状态，也就是数据（注：只能通过mutations来修改数据）
mutations修改数据
6）第六步：getters获取数据变化，返回到组件的计算属性，更新组件
getters
根组件计算属性
