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/

转自：https://segmentfault.com/a/1190000008861913