实现简约不简单的vuex

关于vuex的使用，大家自然不陌生，如果有不熟练的可以多看看vuex官网，记住一条原则：异步操作以及复杂的逻辑必须通过action实现，否则会报下列错误

Error: [vuex] do not mutate vuex store state outside mutation handlers.

项目源码

遵循原则：vuex对vue具有强依赖，vuex以及本demo只能用于vue项目。
demo拆解：实现state -> commit -> dispatch

• 实现state

tstore.vue文件

实例化一个new TStore，new 实例化会自动包含一个constructor属性
export default new TStore({
  state: {
    count: 1
  }
})
复制代码

tstore.js文件

import Vue from 'vue';  // 已经说过了，vuex对vue具有强耦，必须引入vue

class TStore {
  // new 实例化生成的constructor属性，指向他们的构造函数  constructor 是一种用于创建和初始化class创建的对象的特殊方法
  constructor(options) {  // options就是new Store的实例化 是state这个对象
    this.state = options.state;
    new Vue({ 
      data: {
        state: this.state
      }
    });
  }
}
复制代码

index.vue文件

import store from './tstore';

computed: {
  count(){  // 由于暂时没有实现mapState的方法，只能使用当前
    return store.state.count;
  }
},
复制代码

则相当于，在TStore里找到TStore.state，又通过class TStore找到tstore.vue文件中定义的count，则在index.vue里可以使用count

• 实现commit 定义mutations函数

  mutations: {
    add(state) {
      state.count++;
    }
  },
复制代码

调用commit
store.commit('add')

实现vuex

import Vue from 'vue';

class TStore {
 constructor(options) {  // options就是new Store的实例化
   this.state = options.state;
   this.mutations = options.mutations;
   new Vue({  // vuex对于vue有强耦，只能用于vue redux则不是
     data: {
       state: this.state
     }
   });
 }

 commit(type, payload) {  // 此时type就是add，就是调用commit时传的参
   // this.mutations是定义的mutations函数，则this.mutations.app则是add这个函数，传入type参数即可实现
   const mutation = this.mutations[type];   // 拿到函数 执行
   mutation(this.state, payload); // 传参给mutation 也就是this.mutations函数
 }
}
复制代码

action的实现在源码里有详细备注，请大家多多指正。

总结

vuex实现是借用vue本身的数据响应式机制使state相应化，从而使state变化立刻相应在依赖的视图中。借助vue本身的数据响应式机制进行托管实现单向数据流。原理就是借助了vue的数据劫持，state的值变成响应式，如果state有改变，就通知组件。

上一篇
模仿vue的数据劫持，实现mvvm

转载于:https://juejin.im/post/5d01ba1af265da1b6836b6df