import App from './App.vue'
import Vue from 'vue'
// 1. import
import Vuex from 'vuex'
Vue.use(Vuex)
// 2. Vue.use
// 3. inject root Vue instance
const store = new Vuex.Store({state: {},getters: {},mutations: {},actions: {}
})
new Vue({el: '#app',store,render: (h) => h(App)
}

// myVuex/index.js
const install = (Vue) => {};class Store {constructor (options) {this.options = options;}
}const Vuex = { install, Store };export default Vuex;

// App.vue
<template><div id="app"><h3>{{$store.state.age}}</h3></div>
</template>

const install = (Vue) => {Vue.mixin({// 实例初始化后立即同步调用，在数据检测和事件/watcher设置之前beforeCreate () {const { store } = this.$options;if (store) {this.$store = store;} else { // 子组件在渲染的时候会获取父组件的 $store(组件会从上到下进行渲染)this.$store = this.$parent && this.$parent.$store;}}});
};

class Store {constructor (options) {const { state} = options;// 执行Vue.use会执行install方法，会将全局的Vue赋值为Vue实例// 保证state具有响应性this._vm = new Vue({data: { state }});}// 属性会被定义在实例的原型上// this.state = this._vm.state// 每次都会获取到最新的this._vm.stateget state () {return this._vm.state;}
}

<template><div id="app"><h3>{{$store.state.age}}</h3><button @click="onAdd">add age</button></div>
</template><script>export default {name: 'App',components: {},methods: {onAdd () {this.$store.commit('add', 1);}}};
</script>
// store/index.js
export default new Vuex.Store({// ...mutations: {add (state, payload) {state.age = state.age + payload;}}// ...
});

// object iterate
const forEach = (obj, cb) => {Object.keys(obj).forEach((key) => {cb(key, obj[key], obj);});
};

class Store {constructor (options) {const { state, mutations } = options;// 执行Vue.use会执行install方法，会将全局的Vue赋值为Vue实例// 保证state具有响应性this._vm = new Vue({data: { state }});this.mutations = {};forEach(mutations, (key, mutation) => {this.mutations[key] = (payload) => {// this.state是不能被更改的// 但是这里我们将this._vm.state的地址赋值给了参数state，// 之后我们更改的是this._vm.state地址对应的堆内存，而该值是响应式的mutation(this.state, payload);};});}// 属性会被定义在实例的原型上// this.state = this._vm.state// 每次都会获取到最新的this._vm.stateget state () {return this._vm.state;}// 通过commit来修改statecommit (type, payload) {const mutation = this.mutations[type];if (mutation) {mutation(payload);}}
}

<template><div id="app"><h3>{{$store.state.age}}</h3><button @click="onAsyncAdd"> async add age</button></div>
</template><script>export default {name: 'App',components: {},methods: {onAsyncAdd () {this.$store.dispatch('asyncAdd', 1);}}};
</script>
export default new Vuex.Store({// ...mutations: {add (state, payload) {state.age = state.age + payload;}},actions: {// const { commit } = store;// this指向不一样// commit()// store.commit()asyncAdd ({ commit }, payload) {// 这里调用commit时，如果不提前指定this的话，this会指向undefinedsetTimeout(() => {commit('add', payload);}, 2000);}},// ...
});

class Store {constructor (options) {// ...this.actions = {};forEach(actions, (key, action) => {this.actions[key] = (payload) => {// action中的第一个参数为Store的实例，可以通过commit来更改state// 也可以通过dispatch来派发另一个actionaction(this, payload);};});// 通过bind返回一个函数赋值为this.commit，该函数内部会通过call执行this.commit，// 并且会将返回函数的参数也传入this.commit// 等号右边 => Store.prototype.commit 原型方法// 等到左边 => store.commit 实例私有方法// this.commit = this.commit.bind(this);}// 通过commit来修改statecommit = (type, payload) => {const mutation = this.mutations[type];if (mutation) {mutation(payload);}};dispatch (type, payload) {const action = this.actions[type];if (action) {action(payload);}}
}

<template><div id="app"><h2>{{$store.getters.personalInfo}}</h2></div>
</template>
export default new Vuex.Store({state: {age: 10,person: {profile: {job: 'developer',company: 'alipay',name: 'zs'},}},getters: {personalInfo (state) { // 获取个人信息const { profile } = state.person;return Object.keys(profile).reduce((prev, cur) => {return prev + `${cur}: ${profile[cur]}; `;}, '');}}// ...
});

class Store {constructor() {// do something ...this.getters = {};forEach(getters, (getter, key) => {// 每次取值时都会调用get方法// 而computed方法只会在Object.defineProperty(this.getters, key, {get: () => {return getter(this.state);}});});// do something ...}
}

// store.js
export function install (_Vue) {Vue = _VueapplyMixin(Vue)
}// mixin
export default function applyMixin (Vue) {Vue.mixin({ beforeCreate: vuexInit })/*** Vuex init hook, injected into each instances init hooks list.*/function vuexInit () {const options = this.$options// store injection// 自上而下将根实例中传入的VuexStore实例store注入到所有组件的实例上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}}
}

// store.js
export class Store {constructor (options = {}) {// some code ...this._modules = new ModuleCollection(options);// some code ...}
}// module-collection.js
export default class ModuleCollection {constructor (rawRootModule) {// register root module (Vuex.Store options)this.register([], rawRootModule, false)}register (path, rawModule, runtime = true) {// 格式化用户配置项，并为每个模块原型上添加一些公有方法，方便调用const newModule = new Module(rawModule, runtime);// 处理根模块if (path.length === 0) {this.root = newModule;} else { // 处理子模块// 通过path找到父模块const parent = this.get(path.slice(0, -1));// 将父模块的子模块赋值为当前遍历的模块，key为path的最后一项parent.addChild(path[path.length - 1], newModule);// parent._children[path[path.length-1]] = newModule}// register nested modulesif (rawModule.modules) { // 递归处理子模块forEachValue(rawModule.modules, (rawChildModule, key) => {this.register(path.concat(key), rawChildModule, runtime);});}}
}

{ root:{state: {},_children:{},_rawModule: {},__proto__: {addChild: f,forEachMutation: f,forEachAction: f,...}},
}

export class Store {constructor (options = {}) {// ...// 模块收集this._modules = new ModuleCollection(options);const state = this._modules.root.state;// init root module.// this also recursively registers all sub-modules// and collects all module getters inside this._wrappedGetters// 模块安装installModule(this, state, [], this._modules.root);}
}function installModule (store, rootState, path, module, hot) {// 当path为空数组时，遍历的是根模块const isRoot = !path.length;// 根据path获取当前遍历模块的命名空间namespaceconst namespace = store._modules.getNamespace(path);// register in namespace mapif (module.namespaced) {if (store._modulesNamespaceMap[namespace] && __DEV__) {console.error(`[vuex] duplicate namespace ${namespace} for the namespaced module ${path.join('/')}`);}// 在store上存储模块命名空间的映射，key为namespace,value为module// 每个模块都应该有自己单独的命名空间，方便检查命名空间是否重复并提醒用户store._modulesNamespaceMap[namespace] = module;}// set stateif (!isRoot && !hot) {// 根据根state以及path找到对应的父stateconst parentState = getNestedState(rootState, path.slice(0, -1));// path的最后一项为当前处理的模块名const moduleName = path[path.length - 1];store._withCommit(() => {// 保证为state赋值时，值为响应式Vue.set(parentState, moduleName, module.state);// state => this._modules.root.state// store._vm = new Vue({//    data: {//        $$state: state//    }// })// store.state => store._vm._data.$$state// 所以store.state和state即this._modules.root.state指向同一片堆内存空间，堆内存的键值对发生变化时，会同步更新});}// 生成当前模块的state,getters,commit,dispatch// 方便之后在注册mutation,action,getter时使用当前模块的一些属性和方法：// 如在action中可以使用局部的commit,dispatch来调用当前模块的mutation和actionconst local = module.context = makeLocalContext(store, namespace, path);// 为store设置mutationsmodule.forEachMutation((mutation, key) => {const namespacedType = namespace + key;registerMutation(store, namespacedType, mutation, local);});module.forEachAction((action, key) => {const type = action.root ? key : namespace + key;const handler = action.handler || action;registerAction(store, type, handler, local);});module.forEachGetter((getter, key) => {const namespacedType = namespace + key;registerGetter(store, namespacedType, getter, local);});module.forEachChild((child, key) => {installModule(store, rootState, path.concat(key), child, hot);});
}

const store = {"_mutations": {"cart/pushProductToCart": [function handler() {}],},"_actions": {"cart/addProductToCart": [function handler() {}],},
}

function resetStoreVM (store, state, hot) {// bind store public gettersstore.getters = {};// reset local getters cachestore._makeLocalGettersCache = Object.create(null);const wrappedGetters = store._wrappedGetters;const computed = {};forEachValue(wrappedGetters, (fn, key) => {// use computed to leverage its lazy-caching mechanism// direct inline function use will lead to closure preserving oldVm.// using partial to return function with only arguments preserved in closure environment.// 将getter放到计算属性中computed[key] = partial(fn, store);// store.getters中的属性从store中创建的 vue instance 中获取Object.defineProperty(store.getters, key, {get: () => store._vm[key],enumerable: true // for local getters});});// 通过创建Vue实例，然后将store.state定义在Vue的data中，保证state的响应性// 将getters放入到计算属性中，在从getters中取值时会从store._vm中获取store._vm = new Vue({data: {// 以_或者 $ 开头的属性，将不会被代理在Vue实例上，因为它们可能与Vue内部的属性和API方法发生冲突// 您必须像vm.$data._property一样访问它们$$state: state},computed});Vue.config.silent = silent;// enable strict mode for new vmif (store.strict) {// 启用严格模式，当通过mutation异步更改state时会报错enableStrictMode(store);}
}

class Store {// ...get state () {return this._vm._data.$$state;}// ...
}const state = this._modules.root.state;store._vm = new Vue({data: {// 以_或者 $ 开头的属性，将不会被代理在Vue实例上，因为它们可能与Vue内部的属性和API方法发生冲突// 您必须像vm.$data._property一样访问它们$$state: state},computed
});

commit (_type, _payload, _options) {// check object-style commitconst {type,payload,options} = unifyObjectStyle(_type, _payload, _options);// 插件调用subscribe方法是回调函数的参数const mutation = { type, payload };const entry = this._mutations[type];if (!entry) {if (__DEV__) {console.error(`[vuex] unknown mutation type: ${type}`);}return;}// 用_withCommit包裹来判断是否同步更改statethis._withCommit(() => {// commit时调用mutation,参数为payloadentry.forEach(function commitIterator (handler) {handler(payload);});});// 调用commit更改state时，调用所有插件中订阅的方法this._subscribers.slice() // shallow copy to prevent iterator invalidation if subscriber synchronously calls unsubscribe.forEach(sub => sub(mutation, this.state));
}

class Store {construtor() {// ... some codethis._committing = false;}_withCommit (fn) {const committing = this._committing;this._committing = true;fn();this._committing = committing;}
}// 启用严格模式
function enableStrictMode (store) {// 该操作是十分昂贵的，所以需要在生产环境禁用// 同步深度监听store中state的变化，当state改变没有通过mutation时，会抛出异常store._vm.$watch(function () { return this._data.$$state; }, () => {if (__DEV__) {assert(store._committing, `do not mutate vuex store state outside mutation handlers.`);}}, { deep: true, sync: true });
}

// 在注册action时，会将action的返回值通过Promise.resolve(res)处理成promise,并返回
function registerAction (store, type, handler, local) {const entry = store._actions[type] || (store._actions[type] = []);entry.push(function wrappedActionHandler (payload) {let res = handler.call(store, {// 当前模块的dispatch,会帮用户拼接命名空间。当传入第三个参数 { root: true }，调用全局的dispatchdispatch: local.dispatch,// 当前模块的commit, 会帮用户拼接命名空间commit: local.commit,// 当前模块的getters, 会从命名空间中将当前的getter进行分离getters: local.getters,// 通过path获取到当前模块的statestate: local.state,// 全局的gettersrootGetters: store.getters,// 全局的staterootState: store.state}, payload);if (!isPromise(res)) {// 返回值不是Promise的话通过Promise.resolve转换为Promiseres = Promise.resolve(res);}if (store._devtoolHook) {return res.catch(err => {store._devtoolHook.emit('vuex:error', err);throw err;});} else {return res;}});
}

dispatch (_type, _payload) {// check object-style dispatchconst {type,payload} = unifyObjectStyle(_type, _payload);const action = { type, payload };const entry = this._actions[type];// 执行所有的actions，actions中的函数会被处理成romise返回,当同一type有多个action时，通过Promise.all进行处理// 最终得到的result也是promiseconst result = entry.length > 1? Promise.all(entry.map(handler => handler(payload))): entry[0](payload);// 如果不用处理额外逻辑的话，可以直接将promise进行返回// return result;// 返回一个新的Promise,该Promise被解决的value是result的value，该Promise被拒绝的reason是result失败的reasonreturn new Promise((resolve, reject) => {result.then(res => {// do something ...resolve(res);}, error => {// do something ...reject(error);});});
}

store.dispatch('type',payload)
.then(() => { // do someting on success},() => { // do something on failure})

registerModule (path, rawModule, options = {}) {// path为字符串时将其处理为数组if (typeof path === 'string') path = [path];// 进行模块收集，根据path以及用户传入的选项// 根据path将其放到this._modules.root上this._modules.register(path, rawModule);// 将新加到this._modules.root上的模块通过path安装到store上installModule(this, this.state, path, this._modules.get(path), options.preserveState);// reset store to update getters...// 为store添加新注册的gettersresetStoreVM(this, this.state);
}

const myPlugin = store => {// 在store被初始化的时候被调用store.subscribe((mutation, state) => {// 在每次执行mutation之后调用// mutation的格式为 `{ type, payload }`.})
}const store = new Vuex.Store({// ...plugins: [myPlugin]
})

function logger (store) {let prevState = JSON.parse(JSON.stringify(store.state));// 每次修改state时分别打印之前记录前一次和下一次的statestore.subscribe((mutation, state) => {console.log('prevState', prevState);const nextState = JSON.parse(JSON.stringify(state));console.log('nextState', nextState);prevState = nextState;});
}const store = new Vuex.Store({// ...plugins: [logger]
})

class Store {constructor(options) {const {plugins = [], // 配置项中的插件选项，默认值为空对象strict = false} = options;this._subscribers = [];// 依次执行插件数组中的每个函数，参数为Store实例this，可以调用store的属性和方法plugins.forEach(plugin => plugin(this));}subscribe (fn, options) {return genericSubscribe(fn, this._subscribers, options);}commit (_type, _payload, _options) {// some code ...// 调用commit更改state时，调用所有插件中订阅的方法this._subscribers.slice() // shallow copy to prevent iterator invalidation if subscriber synchronously calls unsubscribe.forEach(sub => sub(mutation, this.state));// some code ...}
}function genericSubscribe (fn, subs, options) {// 如果fn在subs中不存在，options中传入{ prepend: true }会将fn放到subs的第一项// 否则会将fn放入到subs中的最后一项if (subs.indexOf(fn) < 0) {options && options.prepend? subs.unshift(fn): subs.push(fn);}// 会返回取消订阅(unsubscribe)函数，将fn从subs中删除，这样在调用mutation的时候就不会触发fnreturn () => {const i = subs.indexOf(fn);if (i > -1) {subs.splice(i, 1);}};
}

// 从`vuex`中引入
import { mapState } from 'vuex'export default {// ...computed: mapState({// arrow functions can make the code very succinct!count: state => state.count,// 与`state => state.count`的写法作用相同countAlias: 'count',// to access local state with `this`, a normal function must be usedcountPlusLocalState (state) {return state.count + this.localCount}}),mounted() {// 使用store中的stateconsole.log(this.count);console.log(this.countPlusLocalState);}
}

// 处理命名空间namespace和map的一些可能情况，并且在处理之后将namespace和map传递给回调函数fn
function normalizeNamespace (fn) {return (namespace, map) => {// 命名空间是选传的，如果命名空间不是字符串，那么说明只传了一个参数，将变量往后移，并且命名空间为''if (typeof namespace !== 'string') {map = namespace;namespace = '';} else if (namespace.charAt(namespace.length - 1) !== '/') {// 传入的命名空间如果没有/，帮用户补全namespace += '/';}// fn会通过命名空间以及map会返回一个对象，对象大概像这样：// res = {//   age() {//     // 当前命名空间的state中的age//     return state.age//   }// }return fn(namespace, map);};
}// 将用户传入的map统一处理为[{key,val}]的格式
function normalizeMap (map) {// 不是数组或对象的话返回空数组if (!isValidMap(map)) {return [];}// 将数组和对象统一转换为数组// 数组： ['name','age'] => [{key:'name', val: 'name'}, {key:'age', val: 'age'}]// 对象： {a: 'name', b: 'age'} => [{key: 'a', val: 'name'}]return Array.isArray(map)? map.map(key => ({ key, val: key })): Object.keys(map).map(key => ({ key, val: map[key] }));
}function getModuleByNamespace (store, helper, namespace) {// 在安装模块的时候将命名空间与模块进行了映射，在这里可以通过命名空间获取到模块const module = store._modulesNamespaceMap[namespace];return module;
}
function installModule (store, rootState, path, module, hot) {// some code ...// 根据path获取当前遍历模块的命名空间namespaceconst namespace = store._modules.getNamespace(path);// register in namespace mapif (module.namespaced) {if (store._modulesNamespaceMap[namespace] && __DEV__) {console.error(`[vuex] duplicate namespace ${namespace} for the namespaced module ${path.join('/')}`);}// 在store上存储模块命名空间的映射，key为namespace,value为module// 每个模块都应该有自己单独的命名空间，方便检查命名空间是否重复并提醒用户// 也方便之后在辅助函数中通过命名空间来获取到其对应的模块store._modulesNamespaceMap[namespace] = module;}// 为module.context赋值，方便之后在辅助函数中从module通过context来获取当前模块的state,getters,dispatch,actionconst local = module.context = makeLocalContext(store, namespace, path);// some code ...
}export const mapState = normalizeNamespace((namespace, states) => {const res = {};// [{key:'name', val: 'name'}, {key:'age', val: 'age'}]normalizeMap(states).forEach(({ key, val }) => {res[key] = function mappedState () {let state = this.$store.state;let getters = this.$store.getters;if (namespace) { // 如果传入了命名空间const module = getModuleByNamespace(this.$store, 'mapState', namespace);if (!module) {return;}// 当前命名空间模块的statestate = module.context.state;// 当前命名空间模块的gettersgetters = module.context.getters;}return typeof val === 'function'? val.call(this, state, getters): state[val];};});// res = {//   age() {//     // 当前命名空间的state中的age//     return state.age//   }// }return res;
});

function mapState(namesapce,map) {// 处理命名空间，并将map转换为Vue中computed支持的对象格式// ...return {age() {// 通过命名空间获取到对应模块的state,然后取到map中的属性返回// ...return state.age}}
}
mapState(['a','b'], ['age'])