使用发布订阅例子

  1. /*
  2.  * 发布-订阅 pubSub.js
  3.  */
  5. export default class PubSub{
  6.     constructor(){
  7.         this.events = {};
  8.     }
  10.     subscribe (type, callback) {
  11.         if(!this.events.hasOwnProperty(type)) {
  12.             this.events[type] = [];
  13.         }
  14.     }
  16.     publish(type, data = {}) {
  17.         if(!this.events.hasOwnProperty(type)) {
  18.             return [];
  19.         }
  21.         return this.events[type].map(() => {
  22.             callback(data);
  23.         })
  24.     }
  25. }
  1. /*
  2.  * 模仿vuex store类
  3.  * store.js
  4.  */
  5. export default class Store {
  6.     constructor () {
  7.         let that = this;
  8.         this.mutations = params.mutations ? params.mutations : {};
  9.         this.actions = params.actions ? params.actions : {};
  10.         this.events = new PubSub();
  11.         this.state = new Proxy((parmas.state || {}), {
  12.             set(target, key, value) {
  13.                 // 直接赋值
  14.                 target[key] = value;
  16.                 console.log(`stateChange: ${key} : ${value}`);
  17.                 self.events.publish('stateChange', self.state);
  19.                 if (self.status !== 'mutation') {
  20.                     console.warn('warning! state should be changed by mutatoin.');
  21.                 }
  23.                 self.status = 'resting';
  25.                 return true;
  26.             }
  27.         })
  28.     }
  30.     /*
  31.      * dispatch 触发一个 action
  32.     **/
  33.     dispatch (actionType, payload) {
  34.         let that = this;
  35.         if (typeof this.actions[actionType] !== 'funciton') {
  36.             console.warn(`${actionType} action is no defined`);
  37.             return false
  38.         }
  40.         this.status = 'action';
  41.         this.actions[actionType](this, payload);
  43.         return true;
  44.     }
  46.     commit (mutationType, payload) {
  47.         if (typeof this.mutations[mutationType] !== 'function') {
  48.             console.warn(`${mutationType} mutation is no defined`);
  49.             return false;
  50.         }
  52.         this.status = 'mutation';
  53.         let newState = this.mutations[mutationType](this, payload);
  54.         this.state = Object.assign(this.state, newState);
  56.         return true;
  57.     }
  58. }

直接使用一个Vue实例作store

  1. class Store {
  2.     constructor (options, Vue = window.Vue) {
  3.         if (!Vue) {
  4.             console.warn('You should import Vue.js before use Store');
  5.             return false;
  6.         }
  8.         var bus = new Vue({
  9.             state: options.state
  10.         })
  12.         this.install(bus, Vue);
  13.     }
  15.     install(bus, Vue) {
  16.         Vue.mixin({
  17.             beforeCreate () {
  18.                 if (this.$options.store) {
  19.                     Vue.prototype.$store = bus;
  20.                 }
  21.             }
  22.         })
  23.     }
  24. }

参考资料

vuex 源码：如何实现一个简单的 vuex
前端状态管理简易实现(以vuex为例)