Vue2.0 探索之路——vuex入门教程和思考

Vuex是什么

首先对于vuex是什么，我先引用下官方的解释。

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的全部组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

就个人直观理解 vuex相似于维护了一个全局的 Map对象。你能够往里存放 key-value。而后全部的state数据操做都方法化，保证操做的可追踪和数据的干净。

Vuex应用场景

其实对于vuex的应用场景一开始我有点误区，由于我把它当作了一个从始至终相似于 localstorage的存在。后来发现一刷新页面，vuex中的state存放的数据会丢失。由于它只是在当前页面初始化生成的一个实例，你一刷新页面全部数据从新生成，数据就没了。

因此，vuex只能用于单个页面中不一样组件（例如兄弟组件）的数据流通。

想必你们在想项目中啥状况会用到vuex吧。
官方是说到了时间你天然知道啥时候用了，由于小项目加入vuex，代码成本比较高，你得写各类action，mutation，dispatch交互。你自个儿都会恶心掉。

只有项目大了，组件多了，你须要一个状态机来解决同一个页面内不一样组件之间的数据交流。
就好比说我下面例子中的 todolist中，todo输入框是一个组件，todolist展现框也是一个组件，他们同属于一个页面，你用传统的 event bus是很不方便的解决这个问题的。

还有就是子组件想改变父组件的状况下，就好比咱们最近作的一个项目里的动态表单，其中一个是作了弹出框选择职业类，选完还得回填到父组件，之前的方式，你可能须要写不少的event bus去拦截事件，如今你能够用vuex去很清晰的解决这个问题，修改vuex里的值，父组件自动更新。

Vuex基础概念

vuex中涉及的概念主要有下面几点，下面作个简单的介绍和理解。

Vuex 官方文档：https://vuex.vuejs.org/zh-cn/

State

vuex的单一状态树，使用一个对象就包含了应用层的全部状态。
个人理解是，state是vuex本身维护的一份状态数据。数据的格式须要你根据业务去设计哟~~
下面是我简单设计的todolist的state状态树。

Getters

getters属性主要是对于state中数据的一种过滤，属于一种增强属性。好比你在作一个todolist，对于已完成的，你能够写一个doneTodoList的属性，在外面直接调用。其实他就是对于action和mutations的一个简化。否则你写一个doneTodoList功能，你还得写对应的action和mutation，费劲啊。

因此，总结一下，一些简单或通用的操做能够抽取到getters上来，方便在应用中引用。

Actions

action,动做。
对于store中数据的修改操做动做在action中提交。
其实action和mutation相似，可是action提交是mutation，并不直接修改数据，而是触发mutation修改数据。

Mutations

更改 Vuex 的 store 中的状态的惟一方法是提交 mutation。
mutation中写有修改数据的逻辑。
另外mutation里只能执行同步操做。

Module

module,模块化。
由于随着后面的业务逻辑的增多，把vuex分模块的开发会使得代码更加简洁清晰明了，好比登陆一个模块，产品一个模块，这样后面改动起来也简单嘛。
下图的 todo目录就是一个module，下面的 actions.js,mutations.js就和外面的同样。

代码实践

引入vuex依赖

npm install vuex

目录结构

store.js 将vuex维护的全部数据导出供外部使用。

mutation_type.js 维护操做类型的常量字段

main.js加载

页面使用

1.读取store里的值：

this.$store.state.字段名
若是有moudle的话，假设叫 login,那么取值又要变了，加上module名
this.$store.state.login.mobile

2.发起操做请求:

this.$store.dispatch('action中的方法名' , '参数');
参数你能够随便传json

3.getters的用法

this.$store.getters.filterDoned
filterDoned 是在todo 里写的一个getters方法，就这么调用噢

项目Github

写了一个小demo方便实践。对vuex不了解的朋友能够看看。纯小白写法，都能看得懂。若是以为有所帮助能够点个star，感激涕零了~~

Demo 地址：https://github.com/XuXiaoGH/v...

Demo 预览：http://chanming.cc/dist/vuex/...

写在最后

本文只是一个简单的入门使用，

走过路过的朋友，若是对你有帮助的话不妨点个收藏或者推荐再走哈，那将是对我最大的鼓励，谢谢啦。