一、vuex介绍
（1）vuex是什么？
1. 借鉴了Flux、Redux、The Elm Architecture
2. 专为 Vue.js 设计的
状态管理模式
3. 集中式存储和管理应用程序中所有组件的状态
4. Vuex 也集成到 Vue 的官方调试工具
5. 一个 Vuex 应用的核心是 store（仓库，一个容器），store包含着你的应用中大部分的
状态 (state)
。
（2）什么情况下我应该使用 Vuex？
1. 不适用：小型简单应用，用 Vuex 是繁琐冗余的，更适合使用简单的store 模式。
2. 适用于：中大型单页应用，你可能会考虑如何
把组件的共享状态抽取出来，以一个全局单例模式管理，不管在哪个组件，都能获取状态/触发行为
，解决问题如下：
① 多个视图使用于同一状态：
传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力
采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝，通常会导致无法维护的代码
（3）Vuex 和单纯的全局对象有何不同？
1.Vuex 的状态存储是响应式的
当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
2.你不能直接改变 store 中的状态
改变 store 中的状态的唯一途径就是显式地
提交 (commit) mutation
，方便我们跟踪每一个状态的变化。
二、vuex安装
* vue cli 3 中搭建脚手架预设时选择了“vuex”后便安装了vuex，可跳过此步阅读
（1）
①. 在创建vuex实例的地方引入vue、vuex，使用vuex：
②. 如果你的actions中用到 store.dispath(),要引入store
③. new 一个 Vuex.Store 实例，并注册 state、mutations、actions、getters到Vuex.Store 实例中
ps. 你可以像上面那样将“属性和值”直接写在实例中，当代码量大时，你也可以分别写个.js文件，如下图：
①. 引入vuex中各属性对应的辅助函数：
②. 使用store中的状态数据、方法：
Vue.use(Vuex); //使用 vuex
export default new Vuex.Store({
state: {
// 初始化状态
count: 0,someLists:[]
},mutations: {
// 处理状态
increment(state,payload) {
state.count += payload.step || 1;
}
},actions: {
// 提交改变后的状态
increment(context,param) {
context.state.count += param.step;
context.commit('increment',context.state.count)//提交改变后的state.count值
},incrementStep({state,commit,rootState}) {
if (rootState.count < 100) {
store.dispatch('increment',{//调用increment()方法
step: 10
})
}
}
},getters: {
//处理列表项
someLists: state =>param=> {
return state.someLists.filter(() => param.done)
}
}
})
