vue的状态管理模式之vuex的学习

Vuex是一个状态管理模式，其采用集中式存储管理应用的所有组件的状态，包括三个部分，分别是state(数据)、views(视图)、actions(方法)。

这是一个单向数据流示意图

但是如果遇到多个视图依赖同一个组件或者来自不同视图的行为需要变更同一状态等问题时，比较好的解决办法就是用vuex。

把全局数据源state、改变数据源的方法mutations、异步操作方法actions都放提取出来放到store中，实现全局数据状态单独管理的功能。

每个应用只有一个 store 实例，Vuex 通过 store 选项，提供了一种机制将状态从根组注入到每一个子组件中，子组件可通过this.$store访问到。

Vuex还允许我们在store中定义“getter”，可被认为是store的计算属性。getter的返回值会根据他的依赖被缓存起来，只有依赖发生改变它才会变。

更改Vuex的store中的状态的唯一方法是提交mutation，其类似于事件。每个mutation都有一个字符串的事件类型和一个回调函数。但书写时不能直接调用mutation回调，需要调用store.commit方法。值得注意的是，mutation必须是同步函数，因为在异步操作中，当mutation 触发的时候，回调函数还没有被调用。

Action 类似于 mutation，但action可进行异步操作；提交的是mutation，而不是直接变更状态。action是通过store.dispatch方法触发的，可在action内部进行异步操作。

Moudles是将store分割成模块，每个模块拥有自己的state、mutation、getter、action，避免因为项目结构复杂而导致store对象变臃肿。

详情请见vuex官方文档Vuex 是什么？ | Vuex