我们都晓得vuex是vue的两个状况命令行，它选用封闭式repeats应用领域的大部份模块的状况，并以适当的准则确保状况以一类可预估的形式发生改变。先看一看vuex上面的组织工作时序

透过非官方文件格式提供更多的时序他们晓得，vuex的组织工作业务流程，

1、统计数据从state中图形到网页；

2、在网页透过dispatch来促发action；

3、action透过初始化commit,来促发mutation；

4、mutation来更动统计数据，数据更改后会促发dep第一类的notify，通告大部份Watcher第一类去修正相关联快照（vue的单向统计数据存取基本原理）。

选用vuex

认知vuex的组织工作业务流程他们就看一看vuex在vue中是是不是选用的。

具体来说用vue-cli建立两个工程建设项目工程建设，如下表所示图，优先选择vuex，接着是一路上的二百六十名

加装好后，就有两个暗含vuex的vue工程建设项目了。

步入产品目录接着看见，src/store.js，在里头加了两个状况{count: 100}，如下表所示

import Vue from vue import Vuex from vuex // 导入vuex Vue.use(Vuex) // 选用应用领域程序 export default new Vuex.Store({ state: { count: 100 // 加两个状况 }, getter: { }, mutations: { }, actions: { } })

最后在App.vue文件里头选用上这个状况，如下表所示

<template> <div id=”app”> 这里是stort——->{{this.$store.state.count}} </div> </template> <script> export default { name: app } </script> <style> </style>

工程建设项目跑起来就会看见网页上看见，网页上会有100了，如下表所示图

到这里他们选用vuex建立了两个store，并且在他们的App模块快照中选用，但是他们会有一些列的疑问。

store是如何被选用到各个模块上的？？为什么state的统计数据是单向存取的？？在模块中为什么用this.$store.dispch可以促发store的actions？？在模块中为什么用this.$store.commit可以促发store的mutations？？….等等等等带着一堆问题，他们来自己同时实现两个vuex，来认知vuex的组织工作基本原理。

加装并选用store

在src下新建两个vuex.js文件，接着代码如下表所示

use strict let Vue = null class Store { constructor (options) { let { state, getters, actions, mutations } = options } } // Vue.use(Vuex) const install = _Vue => { // 避免vuex重复安装 if (Vue === _Vue) return Vue = _Vue Vue.mixin({ // 透过mixins让每个模块实例化的时候都会执行上面的beforeCreate beforeCreate () { // 只有跟节点才有store配置，所以这里只走一次 if (this.$options && this.$options.store) { this.$store = this.$options.store } else if (this.$parent && this.$parent.$store) { // 子模块深度优先父 –> 子—> 孙子 this.$store = this.$parent.$store } } }) } export default { install, Store }

接着修正store.js中的导入vuex模块改成自己的vuex.js

import Vuex from ./vuex // 自己建立的vuex文件

在他们的代码中export default { install, Store }导出了两个第一类，分别是install和Store

install的作用是，当Vue.use(Vuex)就会自动初始化install方法，在install方法里头，他们用mixin混入了两个beforeCreate的生命周期的钩子函数，使得当每个模块实例化的时候都会初始化这个函数。

在beforeCreate中，第一次根模块透过store属性挂载$store，后面子模块初始化beforeCreate挂载的$store都会向上找到父级的$store，这样子透过层层向上寻找，让每个模块都挂上了两个$store属性，而这个属性的值是他们的new Store({…})的实例。如下表所示图

透过层层向上寻找，让每个组件都挂上了两个$store属性

设置state响应统计数据

透过上面，他们已经从每个模块都透过this.$store来访问到他们的store的实例，上面他们就编写state统计数据，让其变成单向存取的统计数据。上面我们改写store类

class Store { constructor (options) { let { state, getters, actions, mutations } = options // 拿到传进来的参数 this.getters = {} this.mutations = {} this.actions = {} // vuex的核心是借用vue的实例，因为vuex的统计数据更动回更新快照 this._vm = new Vue({ data: { state } }) } // 访问state第一类时候，就直接返回响应式的统计数据 get state() { // Object.defineProperty get 同理 return this._vm.state } }

传进来的state第一类，透过new Vue({data: {state}})的形式，让统计数据变成响应式的。当访问state第一类时候，就直接返回响应式的统计数据，这样子在App.vue中就可以透过this.$store.state.count拿到state的统计数据啦，并且是响应式的呢。

编写mutations、actions、getters

上面他们已经设置好state为响应式的统计数据，这里他们在store.js里头写上mutations、actions、getters，如下表所示

import Vue from vue import Vuex from ./vuex // 导入他们的自己编写的文件 Vue.use(Vuex) // 加装store // 实例化store，参数数第一类 export default new Vuex.Store({ state: { count : 1000 }, getters : { newCount (state) { return state.count + 100 } }, mutations: { change (state) { console.log(state.count) state.count += 10 } }, actions: { change ({commit}) { // 模拟异步 setTimeout(() => { commit(change) }, 1000) } } })

配置选项都写好后，就看见getters第一类里头有个newCount函数，mutations和actions第一类里头都有个change函数，配置好store后他们在App.vue就可以写上，dispatch和commit，分别可以促发actions和mutations，代码如下表所示

<template> <div id=”app”> 这里是store的state——->{{this.$store.state.count}} <br/> 这里是store的getter——->{{this.$store.getters.newCount}} <br/> <button @click=”change”>点击促发dispach–> actions</button> <button @click=”change1″>点击促发commit—> mutations</button> </div> </template> <script> export default { name: app, methods: { change () { this.$store.dispatch(change) // 促发actions相关联的change }, change1 () { this.$store.commit(change) // 促发mutations相关联的change } }, mounted () { console.log(this.$store) } } </script>

统计数据都配置好后，他们开始编写store类，在此之前他们先编写两个循环第一类工具函数。

const myforEach = (obj, callback) => Object.keys(obj).forEach(key => callback(key, obj[key])) // 作用： // 例如{a: 123}，把第一类的key和value作为参数 // 接着是函数运行callback(a, 123)

工具函数都准备好了，后，上面直接县编写getters、mutations和actions的同时实现

class Store { constructor (options) { let { state = {}, getters = {}, actions = {}, mutations = {} } = options this.getters = {} this.mutations = {} this.actions = {} // vuex的核心是借用vue的实例，因为vuex的统计数据更动回更新快照 this._vm = new Vue({ data: { state } }) // 循环getters的第一类 myforEach(getters, (getterName, getterFn) => { // 对this.getters第一类进行包装，和vue的computed是差不多的 // 例如 this.getters[newCount] = fn(state) // 执行 this.getters[newCount]()就会返回计算的统计数据啦 Object.defineProperty(this.getters, getterName, { get: () => getterFn(state) }) }) // 这里是mutations各个key和值都写到，this.mutations第一类上面 // 执行的时候是例如：this.mutations[change]() myforEach(mutations, (mutationName, mutationsFn) => { // this.mutations.change = () => { change(state) } this.mutations[mutationName] = () => { mutationsFn.call(this, state) } }) // 基本原理同上 myforEach(actions, (actionName, actionFn) => { // this.mutations.change = () => { change(state) } this.actions[actionName] = () => { actionFn.call(this, this) } }) const {commit , dispatch} = this // 先存一份，避免this.commit会覆盖原型上的this.commit // 解构把this存取好 // 透过结构的形式也要先初始化这类，接着在上面在初始化原型的相关联函数 this.commit = type => { commit.call(this, type) } this.dispatch = type => { dispatch.call(this, type) } } get state() { // Object.defineProperty 同理 return this._vm.state } // commi初始化 commit (type) { this.mutations[type]() } // dispatch初始化 dispatch (type) { this.actions[type]()

透过上面的，他们可以看出，其实mutations和actions都是把传入的参数，赋值到store实例上的this.mutations和this.actions第一类里面。

当模块中this.$store.commit(change)的时候其实是初始化this.mutations.change(state)，就达到了改变统计数据的效果，actions同理。

getters是透过对Object.defineProperty(this.getters, getterName, {})

对this.getters进行包装当模块中this.$store.getters.newCount其实是初始化getters第一类里头的newCount(state)，接着返回计算结果。就可以显示到界面上了。

我们看一看完成后的效果图。

到这里我们应该懂了vuex的内部代码的组织工作业务流程了，vuex的一半核心应该在这里了。为什么说一半，因为还有两个核心概念module，也是vuex的统计数据的模块化。

vuex统计数据模块化

由于选用单一状况树，应用领域的大部份状况会集中到两个比较大的第一类。当应用领域变得非常复杂时，store 第一类就有可能变得相当臃肿。

为了解决以上问题，Vuex 允许他们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样形式的分割

例如下表所示面的store.js

// 实例化store，参数数第一类 export default new Vuex.Store({ modules: { // 模块a a: { state: { count: 4000 }, actions: { change ({state}) { state.count += 21 } }, modules: { // 模块b b: { state: { count: 5000 } } } } }, state: { count : 1000 }, getters : { newCount (state) { return state.count + 100 } }, mutations: { change (state) { console.log(state.count) state.count += 10 } }, actions: { change ({commit}) { // 模拟异步 setTimeout(() => { commit(change) }, 1000) } } })

接着就可以在界面上就可以写上this.$store.state.a.count(显示a模块count)，this.$store.state.a.b.count(显示a模块下，b模块的count)，这里还有两个要注意的，其实在模块中初始化this.$store.dispatch(change)会同时促发，根的actions和a模块的actions里头的change函数。

上面他们就直接去同时实现models的代码，也是整个vuex的同时实现代码，

use strict let Vue = null const myforEach = (obj, callback) => Object.keys(obj).forEach(key => callback(key, obj[key])) class Store { constructor (options) { let state = options.state this.getters = {} this.mutations = {} this.actions = {} // vuex的核心是借用vue的实例，因为vuex的统计数据更动回更新快照 this._vm = new Vue({ data: { state } }) // 把模块之间的关系进行整理, 自己根据用户参数维护了两个第一类 // root._children => a._children => b this.modules = new ModulesCollections(options) // 无论子模块还是孙子模块，大部份的mutations 都是根上的 // 加装模块 installModules(this, state, [], this.modules.root) // 解构把this存取好 const {commit , dispatch} = this // 透过结构的形式也要先初始化这类，接着在上面在初始化原型的相关联函数 this.commit = type => { commit.call(this, type) } this.dispatch = type => { dispatch.call(this, type) } } get state() { // Object.defineProperty 同理 return this._vm.state } commit (type) { // 因为是数组，所以要遍历执行 this.mutations[type].forEach(fn => fn()) } dispatch (type) { // 因为是数组，所以要遍历执行 this.actions[type].forEach(fn => fn()) } } class ModulesCollections { constructor (options) { // vuex [] // 注册模块 this.register([], options) } register (path, rawModule) { // path 是空数组， rawModule 是个第一类 let newModule = { _raw: rawModule, // 第一类 _children: {}, // 把子模块挂载到这里 state: rawModule.state } if (path.length === 0) { // 第一次 this.root = newModule } else { // [a, b] ==> [a] let parent = path.slice(0, -1).reduce((root, current) => { return root._children[current] }, this.root) parent._children[path[path.length – 1]] = newModule } if (rawModule.modules) { // 遍历注册子模块 myforEach(rawModule.modules, (childName, module) => { this.register(path.concat(childName), module) }) } } } // rootModule {_raw, _children, state } function installModules (store, rootState, path, rootModule) { // rootState.a = {count：200} // rootState.a.b = {count: 3000} if (path.length > 0) { // 根据path找到相关联的父级模块 // 例如 [a] –> path.slice(0, -1) –> [] 此时a模块的父级模块是跟模块 // 例如 [a，b] –> path.slice(0, -1) –> [a] 此时b模块的父级模块是a模块 let parent = path.slice(0, -1).reduce((root, current) => { return root[current] }, rootState) // 透过Vue.set设置统计数据单向存取 Vue.set(parent, path[path.length – 1], rootModule.state) } // 设置getter if (rootModule._raw.getters) { myforEach(rootModule._raw.getters, (getterName, getterFn) => { Object.defineProperty(store.getters, getterName, { get: () => { return getterFn(rootModule.state) } }) }) } // 在跟模块设置actions if (rootModule._raw.actions) { myforEach(rootModule._raw.actions, (actionName, actionsFn) => { // 因为同是在根模块设置，子模块也有能相同的key // 大部份把大部份的都放到两个数组里头 // 就变成了例如 [change, change] , 第两个是跟模块的actions的change，第二个是a模块的actions的change let entry = store.actions[actionName] || (store.actions[actionName] = []) entry.push(() => { const commit = store.commit const state = rootModule.state actionsFn.call(store, {state, commit}) }) }) } // 在跟模块设置mutations，同理上actions if (rootModule._raw.mutations) { myforEach(rootModule._raw.mutations, (mutationName, mutationFn) => { let entry = store.mutations[mutationName] || (store.mutations[mutationName] = []) entry.push(() => { mutationFn.call(store, rootModule.state) }) }) } // 递归遍历子节点的设置 myforEach(rootModule._children, (childName, module) => { installModules(store, rootState, path.concat(childName), module) }) } const install = _Vue => { // 避免vuex重复加装 if (Vue === _Vue) return Vue = _Vue Vue.mixin({ // 透过mixins让每个模块实例化的时候都会执行上面的beforeCreate beforeCreate () { // 只有跟节点才有store配置 if (this.$options && this.$options.store) { this.$store = this.$options.store } else if (this.$parent && this.$parent.$store) { // 子模块深度优先父 –> 子—> 孙子 this.$store = this.$parent.$store } } }) } export default { install, Store }

看见代码以及注释，主要业务流程是根据递归的形式，处理统计数据，接着根据传进来的配置，进行操作统计数据。

至此，他们把vuex的代码同时实现了一遍，在他们App.vue的代码里添加

<template> <div id=”app”> 这里是store的state——->{{this.$store.state.count}} <br/> 这里是store的getter——->{{this.$store.getters.newCount}} <br/> 这里是store的state.a——->{{this.$store.state.a.count}} <br/> <button @click=”change”>点击促发dispach–> actions</button> <button @click=”change1″>点击促发commit—> mutations</button> </div> </template>

最后查看结果。