Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
一、 vuex
全局状态管理
- 多组件共享状态 多个组件使用同一个数据
- 任何一个组件发生改变 其他的组件也要跟着发生相应的变化
二、 安装和基本使用
- 下载 npm install vuex
- 创建全局状态管理的实例
- 注册
- 在组件里使用全局状态值 4-1.获取渲染全局状态值 4-2.修改全局状态值
安装 Vuex 之后，创建一个 store。创建过程直截了当——仅需要提供一个初始 state 对象和一些 mutation：
// 如果在模块化构建系统中，请确保在开头调用了 Vue.use(Vuex)
const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } } }) 现在，你可以通过 store.state 来获取状态对象，以及通过 store.commit 方法触发状态变更：
store.commit('increment')
console.log(store.state.count) // -> 1
三、 5大核心
state 全局状态数据
mutation 规定只有mutation才能修改state 通过commit方法触发
action 可以放异步操作 触发mutation 通过dispatch 触发
getter vuex里的计算属性 和state值进行关联 state发生改变可以重新计算，并且可以在页面上直接使用
Module 在 Scrimba 上尝试这节课 由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。
为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。
四、 action 存放异步
- 统一管理异步请求减少代码量
- 时间旅行更加准确 vue的开发者工具
五、模块化
- 模块化之后state的取值需要添加一级模块名 其他的三个核心不变
- 可以在模块里添加命名空间 作用就是在 mutation getters actions的名字前面 添加模块名 用处就是防止名字冲突
六、 辅助函数
可以帮助我们减少代码量 当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，减少按键次数。 // 在单独构建的版本中辅助函数为 Vuex.mapState import { mapState } from 'vuex'
export default { // ... computed: mapState({ // 箭头函数可使代码更简练 count: state => state.count,
// 传字符串参数 'count' 等同于 `state => state.count`
countAlias: 'count',
// 为了能够使用 `this` 获取局部状态，必须使用常规函数
countPlusLocalState (state) {
return state.count + this.localCount
}
}) }
// 在单独构建的版本中辅助函数为 Vuex.mapState
七、 值类型向计算属性映射
mapState 将全局状态管理的state值映射到使用组价的计算属性 mapGetters 将全局状态管理的getters值映射到使用组价的计算属性
八、函数类型向methods进行映射
mapMutations 将mutation的值映射到方法里 mapActions 将actions里的值映射到方法里
详情请参考https://vuex.vuejs.org/zh/
