阅读 347

实现简约不简单的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

关注下面的标签,发现更多相似文章
评论