一、Vuex是甚么
Vuex是专门针对为Vuejs应用领域面向对象的状况管理软件。它选用封闭式储存管理应用领域的大部份模块的状况，并以适当的准则确保状况以一类可预估的形式出现出现改变。
1、Vuex的形成
由上图，他们能看出Vuex有下列两个部份形成：
1）state
state是储存的单个状况，是储存的基本上统计数据。
2）Getters
getters是store的排序特性，对state的研磨，是衍生出的统计数据。就像computed排序特性那样，getter回到的参数值依照它的倚赖被内存出来，且多于当它的倚赖值出现出现改变才会被再次排序。
3）Mutations
mutations递交更动统计数据，选用store.commit形式更动state储存的状况。（mutations并行表达式）
4）Actions
actions像两个点缀器，递交mutation，而并非间接更改状况。（actions能包涵任何人触发器操作形式）
5）Module
Module是store拆分的模块，每一模块保有他们的state、getters、mutations、actions。
const moduleA = {
state: { … },
mutations: { … },
actions: { … },
getters: { … }
}
const moduleB = {
state: { … },
mutations: { … },
actions: { … }
}
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})
store.state.a // -> moduleA 的状况
store.state.b // -> moduleB 的状况
6）辅助表达式
Vuex提供了mapState、MapGetters、MapActions、mapMutations等辅助表达式给开发在vm中处理store。
2、Vuex的选用
import Vuex from vuex;
Vue.use(Vuex); // 1. vue的插件机制，安装vuex
let store = new Vuex.Store({ // 2.实例化store，调用install形式
state,
getters,
modules,
mutations,
actions,
plugins
});
new Vue({ // 3.注入store, 挂载vue实例
store,
render: h=>h(app)
}).$mount(#app);
二、Vuex的设计思想
Vuex的设计思想，借鉴了Flux、Redux，将统计数据存放到全局的store，再将store挂载到每一vue实例组件中，利用Vue.js的细粒度统计数据响应机制来进行高效的状况更新。
看了Vuex设计思想，心里难免会有这样的疑问：
vuex的store是如何挂载注入到模块中呢？vuex的state和getters是如何映射到各个模块实例中响应式更新状况呢？三、Vuex的基本上原理导出
他们来看下vuex的源码，分析看看上面2个疑惑的问题：
疑问1：vuex的store是如何挂载注入到模块中呢？
1、在vue项目中先安装vuex，核心代码如下：
import Vuex from vuex;
Vue.use(vuex);// vue的插件机制
2、利用vue的插件机制，选用Vue.use(vuex)时，会调用vuex的install形式，装载vuex，install形式的代码如下：
export function install (_Vue) {
if (Vue && _Vue === Vue) {
if (process.env.NODE_ENV !== production) {
console.error(
[vuex] already installed. Vue.use(Vuex) should be called only once.
)
}
return
}
Vue = _Vue
applyMixin(Vue)
}
3、applyMixin形式选用vue混入机制，vue的生命周期beforeCreate钩子表达式前混入vuexInit形式，核心代码如下：
Vue.mixin({ beforeCreate: vuexInit });
function vuexInit () {
const options = this.$options
// store injection
if (options.store) {
this.$store = typeof options.store === function
? options.store()
: options.store
} else if (options.parent && options.parent.$store) {
this.$store = options.parent.$store
}
}
分析源码，他们知道了vuex是利用vue的mixin混入机制，在beforeCreate钩子前混入vuexInit形式，vuexInit形式实现了store注入vue模块实例，并注册了vuex store的引用特性$store。store注入过程如下图所示：
疑问2：vuex的state和getters是如何映射到各个模块实例中响应式更新状况呢？
store实现的源码在src/store.js
1、他们在源码中找到resetStoreVM核心形式：
function resetStoreVM (store, state, hot) {
const oldVm = store._vm
// 设置 getters 特性
store.getters = {}
const wrappedGetters = store._wrappedGetters
const computed = {}
// 遍历 wrappedGetters 特性
forEachValue(wrappedGetters, (fn, key) => {
// 给 computed 对象添加特性
computed[key] = partial(fn, store)
// 重写 get 形式
// store.getters.xx 其实是访问了store._vm[xx]，其中添加 computed 特性
Object.defineProperty(store.getters, key, {
get: () => store._vm[key],
enumerable: true // for local getters
})
})
const silent = Vue.config.silent
Vue.config.silent = true
// 创建Vue实例来保存state，同时让state变成响应式
// store._vm._data.$$state = store.state
store._vm = new Vue({
data: {
$$state: state
},
computed
})
Vue.config.silent = silent
// 只能通过commit形式更动状况
if (store.strict) {
enableStrictMode(store)
}
}
从上面源码，他们能窥见Vuex的state状况是响应式，是借助vue的data是响应式，将state存入vue实例模块的data中；Vuex的getters则是借助vue的排序特性computed实现统计数据实时监听。
computed排序特性监听data统计数据更改主要经历下列两个过程：
小结
合适。假如只是多个模块间传递统计数据，选用vuex未免有点大材小用，其实只用选用模块间常用的通信形式即可。
Vue模块简单常用的通信形式有下列几种：
1、父子通信：
父向子传值，通过props；子向父传值通过events ($emit)；父调用子形式通过ref；provide / inject。
2、兄弟通信：bus
3、跨级嵌套通信：bus；provide / inject等。
作者：小铭子
链接：http://www.imooc.com/article/291242
本文首次发布于慕课网 ，转载请注明出处，谢谢合作
