关于vue.js:实现一个简单的vuex

vuex的用法

html

 <div id="app">
    弟弟的年龄：{{$store.state.age}}
    哥哥的年龄：{{$store.getters.getAge}}
    <button @click="$store.commit('changeAge',5)">五年后</button>
    <button @click="$store.dispatch('changeAge',10)">十年后</button>
  </div>

store

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
//状态
  state: {
    age: 18
  },
 //相当于计算属性
  getters: {
    getAge(state) {
      return state.age + 10;
    }
  },
  //批改状态的办法
  mutations: {
    changeAge(state, payload) {
      state.age = state.age + payload;
    }
  },
  //解决mutations只有同步没有异步
  actions: {
    changeAge({ commit }, payload) {
      setTimeout(() => {
        commit("changeAge", payload);
      },1000);
    }
  }
});

main

import store from "./store";
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

简略的实现

vuex/index

vuex/index 作为总进口 应用两种模式导出
export {} ===> import {Store} from ‘vuex’
export default ===> import Store from ‘vuex’

import { Store, install } from "./store";
export { Store, install };
export default {
  Store,
  install,
};

vuex/store

vuex/store.js这个文件为了不便将install办法和Store类写在一起

install

install办法：将new Vue({store}) 中的store利用Vue的minxin办法通过递归遍历使所有组件都能够用$store来获取到

let Vue;
export const install = (_Vue) => {
  Vue = _Vue;
  Vue.mixin({
    beforeCreate() {
      if (this.$options.store) {
        this.$store = this.$options.store;
      } else if (this.$options.parent && this.$options.parent.$options.store) {
        this.$store = this.$options.parent.$options.store;
      }
    },
  });
};

Store

state 办法

实现了install办法之后咱们发现这样实现state更为不便一些

export class Store {
  constructor(options) {
    this.state = options.state
    }
}

下面这种能够获取到 然而并没有将state进行双向数据绑定，state扭转视图并不会产生扭转，下面的install办法能够拿到全局的Vue,这样咱们能够利用Vue中的observe来将state中的数据增加get和set办法

export class Store {
  constructor(options) {
    let state = options.state;
    this._vm = new Vue({
      data: {
      //$$为外部办法 不挂载在实例上
        $$state: state,
      },
    });
  }
  //取state这个值得时候会触发这个办法
  get state() {
    return this._vm._data.$$state;
  }
}

公共办法forEach的实现

export const forEach = (obj, fn) => {
  Object.keys(obj).forEach((v) => fn(v, obj[v]));
};

应用办法

forEach({ name: "孟", val: "01" }, (key, fn) => {
  console.log(key, fn);
});
//传入一个对象，获取到对象的每一个key和val

getters办法的实现

getters是一个对象 应用的时候$store.getters.getAge,是getAge执行后的后果

    this.getters = {};
    let computed = {};
    forEach(options.getters, (key, fn) => {
    //每次其余数据变动刷新页面都会进行没必要的获取getters中的数据，computed具备缓存的成果 数据不产生扭转就不会触发相应的办法
      computed[key] = () => {
        return fn(this.state);
      };
      //给getter进行双向数据绑定
      Object.defineProperty(this.getters, key, {
      //computed是挂载在实例上的属性
        get: () => this._vm[key],
      });
    });
    this._vm = new Vue({
      data: {
        $$state: state,
      },
      computed,
    });

mutations实现

mutations是根据公布订阅模式先将每一个函数贮存在事件池中，而后通过用户的一个派发动作使对应的事件池中的函数执行

 class Store {
  constructor(options) {
  this.mutations = {};
    forEach(options.mutations, (key, fn) => {
      this.mutations[key] = (payload) => fn(this.state,payload);
    });
   }
     commit = (key, payload) => {
    this.mutations[key](payload);
  };
  }
    

actions的实现

 class Store {
  constructor(options) {
 this.actions = {};
    forEach(options.actions, (key, fn) => {
      this.actions[key] = (payload) => fn(this, payload);
    });
 dispatch = (key, payload) => {
    this.actions[key](payload);
  };
  }