vue(vue-router&&vuex)全家桶源码实现（2）

vuex

vuex的理念是 集中式的状态管理，（统一管理），并且变化可预测。
底层依然是vue的数据响应式。
基础知识
state， action，mutation，store
核心步骤
1.实现vuex插件，并全局可获取
2.声明，注册Store类
3.响应式state属性

• commit()可以修改state
• dispatch()可以执行异步方法，再调用commit， 所以会返回一个promise

vuex源码实现

kstore/kvuex.js

// 实现插件 挂载$store
// 声明store 类 
    // 响应式state
    // commit 可以修改state
    // dispatch 可以调用action
    //实现getters getters 返回的是对应函数的执行结果
let KVue

class Store{
    constructor(options){
        console.log('options', options)
        //响应式的state
        // 方式一 借vue的data  因为data是响应式的，然后赋值给state
        this.state = new KVue({
            data:options.state
        })
        this._vm = new KVue({
            data:{  
                $$state:options.state
            }
        })
        this._mutations = options.mutations
        this._actions = options.actions;
        this._getters = options.getters
        //绑定this到store
        const store = this;
        // 还是bind简单粗暴 
        // this.commit = this.commit.bind(store)
        //vuex官方 commit 与action 源码实现
        const {commit, action}= this;
        this.commit = function bindCommit(type, payload){
            commit.call(store, type, payload)
        }
        this.action = function bindAction(type, payload){
           return action.call(store, type, payload)
        }
        for(const k in options.getters){
            // this.getters[k] = options.getters[k](store.state)
            Object.defineProperty(this._getters, k, 
                {
                get(){
                    return options.getters[k](store.state)}
                }
            )
        }
    }
    // get state(){
    //     return this._vm._data.$$state
    // }
    // set state(val){
    //     console.error('please use replaceState to reste state');
    // }
    // commit ({type, payload})
    // 执行mutaition 更改state
    commit(type, payload){
        let entry = this._mutations[type]
        if(!entry) {
            console.error('unknowe commit type');
            return
        }
        entry(this.state, payload)
    }
    dispatch(type, payload){
        let entry = this._actions[type]
        if(!entry){
            console.error('unknowe action type');
            return
        }
        return entry(this, payload)
    }
}

function install(Vue){
    KVue = Vue
    KVue.mixin({
        beforeCreate(){
            if(this.$options.store){
                Vue.prototype.$store = this.$options.store
            }
        }
    })
}
export default {Store, install}

测试代码

counter :{{$store.state.counter}}
async counter :{{$store.state.counter}}
dbcounter: {{$store.getters.dbcouter}}

kstore/index

import Vue from 'vue'
import Vuex from './kvuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    counter: 1
  },
  mutations: {
    // state 哪来的 怎么实现响应式
    add(state){
      state.counter++
    }
  },
  actions: {
    add({commit}){
      setTimeout(()=>{
        commit('add')
      }, 1000)
    }
  },
  getters:{
    dbcouter: state=>{
      return state.counter*2
    }
    // dbcouter: state.counter*2
  },
  modules: {
  }
})

这两部分的学习让我对vue的响应式原理理解更深入了些，也更明白了MVVM框架为什么是数据驱动视图。
好记性不如烂笔头，记录一下。