Vuex原理学习笔记

1、Vuex.js

let Vue;
const forEach = (obj, callbackk) => {
  Object.keys(obj).forEach((key) => {
    callbackk(key, obj[key]);
  })
}
class Store {
  constructor(options) {
    this.options = options;
    // 利用vue的数据绑定实现响应式更新store.state
    this.vm = new Vue({
      data: {
        state: options.state
      }
    });
    this.state = this.vm.state;

    // 劫持this.getters，关联this.getters和options.getters
    const getters = options.getters;
    this.getters = {};
    forEach(getters, (key, value) => {
      Object.defineProperty(this.getters, key, {
        get: () => {
          return value(this.state);
        }
      })
    })

    // 关联mutations
    const mutations = options.mutations;
    this.mutations = {};
    forEach(mutations, (key, value) => {
      this.mutations[key] = (payload) => {
        value(this.state, payload);
      }
    })

    // 关联action
    const actions = options.actions;
    this.actions = {};
    forEach(actions, (key, value) => {
      this.actions[key] = (payload) => {
        value(this, payload);
      }
    })
  }
  // 等价于this.state = this.vm.state;
  // get state() {
  //   return this.vm.state;
  // }
  /* 
  mutations: {
    increment (state) {
      state.count++
    }
  }
  */
  commit(mutationName, payload) {
    this.mutations[mutationName](payload);
  }
  /* 
  actions: {
    increment (store, payload) {
      store.commit('increment', payload)
    }
  }
  */
  dispatch(actionName, payload) {
    this.actions[actionName](payload);
  }
}

const install = (_Vue) => {
  Vue = _Vue;
  Vue.mixin({
    // this.$store，将store挂载在vue实例上
    beforeCreate() {
      const store = this.$options.store;
      // 如果store存在则为根实例，如果不是根实例则取父组件的store
      this.$store = store ? store : (this.$parent && this.$parent.$store);
    }
  })
}

export default {
  Store,
  install
}

2、store.js

import Vue from 'vue';
import Vuex from './Vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    age: 10,
    num: 20
  },
  getters: {
    price(state) {
      return state.age * 50;
    }
  },
  mutations: {
    changeAge(state, payload) {
      state.age = payload;
    }
  },
  actions: {
    asyncChangeAge(store, payload) {
      setTimeout(() => {
        store.commit('changeAge', payload);
      }, 1000);
    }
  }
});

export default store;