数据的存储方式

先看一下一个下面的例子

const ADD = 'ADD';
const storeOptions = {
  modules: {
    a: {
      namespaced: true,
      state: () => ({
        nums: [],
      }),
      mutations: {
        ADD(state, data) {
          state.push(data);
        }
      },
      actions: {
        plus({ commit }, data) {
          commit(ADD, data);
        }
      },
      getters: {
        maxNum(state) { return Math.max(...state.nums); }
      },
      modules: {
        b: {
          namespaced: true,
          state: () => ({
            nums: [],
          }),
          mutations: {
            ADD(state, data) {
              state.push(data);
            }
          },
          actions: {
            plus({ commit }, data) {
              commit(ADD, data);
            }
          },
          getters: {
            maxNum(state) { return Math.max(...state.nums); }
          },
          modules: {
            c: {
              namespaced: true,
              state: () => ({
                nums: [],
              }),
              mutations: {
                ADD(state, data) {
                  state.push(data);
                }
              },
              actions: {
                plus({ commit }, data) {
                  commit(ADD, data);
                }
              },
              getters: {
                maxNum(state) { return Math.max(...state.nums); }
              },
            }

          }
        }
      }
    }
  }
}

const store = new window.Vuex.Store(window.storeOptions)
vm = new Vue({
  el: '#container',
  store,
  data() {
    console.log('store', store);
    return {};
  }
})

上面的例子的打印结果就是下面的结构

{
	"_committing": false,
  // 这个就是我们在嵌套的modules里定义的actions
	"_actions": {
		"a/plus": [null],
		"a/b/plus": [null],
		"a/b/c/plus": [null]
	},
  // 针对action的订阅者
	"_actionSubscribers": [],
  // 这个就是我们在嵌套modules里定义的mutations
	"_mutations": {
		"a/ADD": [null],
		"a/b/ADD": [null],
		"a/b/c/ADD": [null]
	},
	"_wrappedGetters": {},
  // 这个会存储一个嵌套的modules
	"_modules": {
		"root": {
			"runtime": false,
			"_children": {
				"a": {
					"runtime": false,
					"_children": {
						"b": {
							"runtime": false,
							"_children": {
								"c": {
									"runtime": false,
									"_children": {},
									"_rawModule": {
										"namespaced": true,
										"mutations": {},
										"actions": {},
										"getters": {}
									},
									"state": {
										"nums": []
									},
									"context": {}
								}
							},
              // 这个是modules的原始数
							"_rawModule": {
								"namespaced": true,
								"mutations": {},
								"actions": {},
								"getters": {},
								"modules": {}
							},
							"state": {
								"nums": []
							},
							"context": {}
						}
					},
					"_rawModule": {
						"namespaced": true,
						"mutations": {},
						"actions": {},
						"getters": {},
						"modules": {}
					},
					"state": {
						"nums": []
					},
					"context": {}
				}
			},
			"_rawModule": {
				"modules": {}
			},
			"state": {},
			"context": {}
		}
	},
	"_modulesNamespaceMap": {},
	"_subscribers": [],
	"_makeLocalGettersCache": {
		"a/": {
			"maxNum": null,
			"b/maxNum": null,
			"b/c/maxNum": null
		},
		"a/b/": {
			"maxNum": null,
			"c/maxNum": null
		},
		"a/b/c/": {
			"maxNum": null
		}
	},
	"strict": false,
  // 这个就是我们在嵌套modules里定义的getters
	"getters": {
		"a/maxNum": null,
		"a/b/maxNum": null,
		"a/b/c/maxNum": null
	},
  // 因为vuex本质也是用一个新的vue实例去管理数据的，所以这里就是对应的vue实例
	"_vm": {
		"_uid": 1,
		"_isVue": true,
		"$options": {
			"components": {},
			"directives": {},
			"filters": {},
			"beforeCreate": [null],
			"computed": {}
		},
		"_renderProxy": {
			"_uid": 1,
			"_isVue": true,
			"$children": [],
			"$refs": {},
			"_watcher": null,
			"_inactive": null,
			"_directInactive": false,
			"_isMounted": false,
			"_isDestroyed": false,
			"_isBeingDestroyed": false,
			"_events": {},
			"_hasHookEvent": false,
			"_vnode": null,
			"_staticTrees": null,
			"$slots": {},
			"$scopedSlots": {},
			"_watchers": [{
				"deep": false,
				"user": false,
				"lazy": true,
				"sync": false,
				"id": 1,
				"active": true,
				"dirty": false,
				"deps": [{
					"id": 6,
					"subs": [null, {
						"deep": false,
						"user": false,
						"lazy": true,
						"sync": false,
						"id": 2,
						"active": true,
						"dirty": false,
						"deps": [null, {
							"id": 7,
							"subs": [null, null, {
								"deep": false,
								"user": false,
								"lazy": true,
								"sync": false,
								"id": 3,
								"active": true,
								"dirty": false,
								"deps": [null, null, {
									"id": 8,
									"subs": [null, null, null]
								}, {
									"id": 9,
									"subs": [null, null, null]
								}, {
									"id": 12,
									"subs": [null, null]
								}, {
									"id": 13,
									"subs": [null, null]
								}, {
									"id": 16,
									"subs": [null]
								}, {
									"id": 17,
									"subs": [null]
								}, {
									"id": 18,
									"subs": [null]
								}, {
									"id": 19,
									"subs": [null]
								}],
								"newDeps": [],
								"depIds": {},
								"newDepIds": {},
								"expression": "function () {\n      return fn(arg)\n    }",
								"value": null
							}]
						}, null, null, null, null, {
							"id": 14,
							"subs": [null]
						}, {
							"id": 15,
							"subs": [null]
						}],
						"newDeps": [],
						"depIds": {},
						"newDepIds": {},
						"expression": "function () {\n      return fn(arg)\n    }",
						"value": null
					}, null]
				}, null, null, null, {
					"id": 10,
					"subs": [null]
				}, {
					"id": 11,
					"subs": [null]
				}],
				"newDeps": [],
				"depIds": {},
				"newDepIds": {},
				"expression": "function () {\n      return fn(arg)\n    }",
				"value": null
			}, null, null],
			"_data": {},
			"_computedWatchers": {},
			"a/maxNum": null,
			"a/b/maxNum": null,
			"a/b/c/maxNum": null
		},
		"_watcher": null,
		"_inactive": null,
		"_directInactive": false,
		"_isMounted": false,
		"_isDestroyed": false,
		"_isBeingDestroyed": false,
		"_hasHookEvent": false,
		"_vnode": null,
		"_staticTrees": null,
		"a/maxNum": null,
		"a/b/maxNum": null,
		"a/b/c/maxNum": null
	}
}