從0開始寫一個(gè)自己的Vuex

tinysun1234 發(fā)布于2019-08-20 19:00 / 2908人閱讀

摘要：從開始學(xué)習(xí)源碼前言嘗試從開始，寫一個(gè)主要是的源代碼，從中學(xué)習(xí)下的源代碼先來(lái)看下列子中是怎么使用的。開始第一步作為一個(gè)插件先得實(shí)現(xiàn)方法。先定義一個(gè)變量。一是為了注入到各個(gè)組件，二是后續(xù)要用到的雙向綁定的功能依賴雙向綁定構(gòu)造下。

Vuex從0開始學(xué)習(xí)源碼 前言

嘗試從0開始，寫一個(gè)Vuex(主要是copy vuex的源代碼)，從中學(xué)習(xí)下vuex的源代碼.先來(lái)看下列子中是怎么使用store的。

import Vue from "vue"
import Vuex from "../../src"

Vue.use(Vuex)

// mutation types
// optional if you don"t like constants.
const INCREMENT = "INCREMENT"
const DECREMENT = "DECREMENT"

// root state object.
// each Vuex instance is just a single state tree.
const state = {
  count: 0
}

// actions are what components will be able to
// call as store.actions.xxx
// note these are not the final functions the
// components will be calling.
const actions = {

  // for simple actions that just dispatches a single mutation,
  // we can just provide the mutation type.
  increment: INCREMENT,
  decrement: DECREMENT,

  // for a normal action function, it always recieves the store
  // instance as the first argument, from which we can get the
  // dispatch function and the state object. Any additional
  // arguments will follow the store argument.
  incrementIfOdd: ({ dispatch, state }) => {
    if ((state.count + 1) % 2 === 0) {
      dispatch(INCREMENT)
    }
  },

  // Same thing for async actions.
  incrementAsync: ({ dispatch }) => {
    setTimeout(() => {
      dispatch(INCREMENT)
    }, 1000)
  }
}

// mutations are operations that actually mutates the state.
// each mutation handler gets the entire state tree as the
// first argument, followed by additional payload arguments.
// mutations must be synchronous and can be recorded by middlewares
// for debugging purposes.
const mutations = {
  [INCREMENT] (state) {
    state.count++
  },
  [DECREMENT] (state) {
    state.count--
  }
}

// A Vuex instance is created by combining the state, the actions,
// and the mutations. Because the actions and mutations are just
// functions that do not depend on the instance itself, they can
// be easily tested or even hot-reloaded (see counter-hot example).
// 
// You can also provide middlewares, which is just an array of
// objects containing some hooks to be called at initialization
// and after each mutation.
export default new Vuex.Store({
  state,
  actions,
  mutations
})

開始第一步

Vuex作為一個(gè)插件先得實(shí)現(xiàn)install方法。同時(shí)我們?cè)趇nstall方法里面在Vue組件注入$store,也就是為什么vue中各個(gè)子組件為什么能夠通過(guò)this.$store訪問(wèn)到store這個(gè)對(duì)象

let Vue //存儲(chǔ)Vue變量。一是為了注入$store到各個(gè)Vue組件，二是后續(xù)要用到Vue的雙向綁定的功能
export class Store{

}
export function install (_Vue){
    Vue = _Vue
    const _init = Vue.prototype._init;
    Vue.prototype._init = function(options){
        options = options || {}
        if(options.store){
            this.$store = options.store
        }else if(options.parent && options.parent.$store){
            this.$store = options.parent.$store
        }
        _init.call(this,options)
    }
}
export default {
    Store,install
}

上述代碼中。
先定義一個(gè)Vue變量。有兩個(gè)作用
第一個(gè)作用就是給Vue各個(gè)組件注入$store變量，另外一個(gè)功能后面會(huì)說(shuō)到

第二步暴露state

我們使用vuex的時(shí)候,會(huì)傳入state給頁(yè)面訪問(wèn)，同時(shí)支持當(dāng)頁(yè)面中用到state里面的變量的時(shí)候。及時(shí)更新?tīng)顟B(tài)。這里就會(huì)Vue的另外一個(gè)功能，雙向綁定。

let Vue //存儲(chǔ)Vue變量。一是為了注入$store到各個(gè)Vue組件，二是后續(xù)要用到Vue的雙向綁定的功能
export class Store{
    constructor ({
        state = {},
        actions = {},
        mutations = {}
        }){
        //依賴vue雙向綁定
        this._vm = new Vue({
            data : state
        })

    }
    get state (){
        //頁(yè)面中通過(guò)此方法獲取state
        return this._vm._data;
    }
    set state (v){
        throw new Error("[Vuex] vuex root state is read only.")
    }
}
export function install (_Vue){
    Vue = _Vue
    const _init = Vue.prototype._init;
    Vue.prototype._init = function(options){
        options = options || {}
        if(options.store){
            this.$store = options.store
        }else if(options.parent && options.parent.$store){
            this.$store = options.parent.$store
        }
        _init.call(this,options)
    }
}
export default {
    Store,install
}

可以看到頁(yè)面中count的數(shù)值已經(jīng)可以顯示了

第三步實(shí)現(xiàn)actions

Vuex中的action是用來(lái)干嘛？是用來(lái)dispatch事件，從而來(lái)執(zhí)行mutations的，中間可以穿插一些邏輯，所以我們封裝下actions

import { createAction, mergeObjects } from "./util"
let Vue //存儲(chǔ)Vue變量。一是為了注入$store到各個(gè)Vue組件，二是后續(xù)要用到Vue的雙向綁定的功能
export class Store{
    constructor ({
        state = {},
        actions = {},
        mutations = {}
        }){
        //依賴vue雙向綁定
        this._vm = new Vue({
            data : state
        })
        this.actions = Object.create(null)
        //構(gòu)造下action。兼容字符串和function兩種模式
        this._setupActions(actions);
    }
    get state (){
        //頁(yè)面中通過(guò)此方法獲取state
        return this._vm._data;
    }
    set state (v){
        throw new Error("[Vuex] vuex root state is read only.")
    }
    _setupActions (actions){
        this._actions = Object.create(null);
        actions = Array.isArray(actions) ? mergeObjects(actions) : actions;
        Object.keys(actions).forEach(name =>{
            this._actions[name] = createAction(actions[name],this); //兼容string 和function的寫法
            if(!this.actions[name]){
                this.actions[name] = (...args) =>this._actions[name](...args)
            }
        })
    }
}
export function install (_Vue){
    Vue = _Vue
    const _init = Vue.prototype._init;
    Vue.prototype._init = function(options){
        options = options || {}
        if(options.store){
            this.$store = options.store
        }else if(options.parent && options.parent.$store){
            this.$store = options.parent.$store
        }
        _init.call(this,options)
    }
}
export default {
    Store,install
}

utils.js中的代碼

export function createAction (action, store) {
  if (typeof action === "string") {
    // simple action string shorthand
    return (...payload) => store.dispatch(action, ...payload)
  } else if (typeof action === "function") {
    // normal action
    return (...payload) => action(store, ...payload)
  }
}

第四步構(gòu)造下mutations

這步比較簡(jiǎn)單，直接看代碼

import { createAction, mergeObjects } from "./util"
let Vue //存儲(chǔ)Vue變量。一是為了注入$store到各個(gè)Vue組件，二是后續(xù)要用到Vue的雙向綁定的功能
export class Store{
    constructor ({
        state = {},
        actions = {},
        mutations = {}
        }){
        //依賴vue雙向綁定
        this._vm = new Vue({
            data : state
        })
        this.actions = Object.create(null)
        //構(gòu)造下action。兼容字符串和function兩種模式
        this._setupActions(actions);
        //構(gòu)造mutations
        this._setupMutations(mutations);
    }
    get state (){
        //頁(yè)面中通過(guò)此方法獲取state
        return this._vm._data;
    }
    set state (v){
        throw new Error("[Vuex] vuex root state is read only.")
    }
    _setupActions (actions){
        this._actions = Object.create(null);
        actions = Array.isArray(actions) ? mergeObjects(actions) : actions;
        Object.keys(actions).forEach(name =>{
            this._actions[name] = createAction(actions[name],this); //兼容string 和function的寫法
            if(!this.actions[name]){
                this.actions[name] = (...args) =>this._actions[name](...args)
            }
        })
    }
    _setupMutations(mutations){
        this._mutations = Array.isArray(mutations) ? mergeObjects(mutations,true) : mutations
    }
}
export function install (_Vue){
    Vue = _Vue
    const _init = Vue.prototype._init;
    Vue.prototype._init = function(options){
        options = options || {}
        if(options.store){
            this.$store = options.store
        }else if(options.parent && options.parent.$store){
            this.$store = options.parent.$store
        }
        _init.call(this,options)
    }
}
export default {
    Store,install
}

第五步，實(shí)現(xiàn)dispatch方法

我們知道我們?cè)赼ction里面dispatch事件了。這個(gè)就類似現(xiàn)在的commit。dispatch事件，是要執(zhí)行mutations的

import { createAction, mergeObjects } from "./util"
let Vue //存儲(chǔ)Vue變量。一是為了注入$store到各個(gè)Vue組件，二是后續(xù)要用到Vue的雙向綁定的功能
export class Store{
    constructor ({
        state = {},
        actions = {},
        mutations = {}
        }){
        //依賴vue雙向綁定
        this._vm = new Vue({
            data : state
        })
        this.actions = Object.create(null)
        //構(gòu)造下action。兼容字符串和function兩種模式
        this._setupActions(actions);
        //構(gòu)造mutations
        this._setupMutations(mutations);
    }
    get state (){
        //頁(yè)面中通過(guò)此方法獲取state
        return this._vm._data;
    }
    set state (v){
        throw new Error("[Vuex] vuex root state is read only.")
    }
    _setupActions (actions){
        this._actions = Object.create(null);
        actions = Array.isArray(actions) ? mergeObjects(actions) : actions;
        Object.keys(actions).forEach(name =>{
            this._actions[name] = createAction(actions[name],this); //兼容string 和function的寫法
            if(!this.actions[name]){
                this.actions[name] = (...args) =>this._actions[name](...args)
            }
        })
    }
    _setupMutations(mutations){
        this._mutations = Array.isArray(mutations) ? mergeObjects(mutations,true) : mutations
    }
    /**
     * 執(zhí)行mutation
     */
    dispatch (type,...payload) {
        const mutation = this._mutations[type];
        const state = this.state;
        if(mutation){
            this._dispatching = true
            if(Array.isArray(mutation)){
                //遍歷執(zhí)行
                mutation.forEach(m =>m(state,...payload))
            }else{
                mutation(state,...payload)
            }
            this._dispatching = false
        }else{
            console.warn("[vuex] unknown mutation:${type}")
        }
    }
}
export function install (_Vue){
    Vue = _Vue
    const _init = Vue.prototype._init;
    Vue.prototype._init = function(options){
        options = options || {}
        if(options.store){
            this.$store = options.store
        }else if(options.parent && options.parent.$store){
            this.$store = options.parent.$store
        }
        _init.call(this,options)
    }
}
export default {
    Store,install
}

到此為止測(cè)試頁(yè)面的+ -count功能應(yīng)該是沒(méi)有問(wèn)題了

當(dāng)點(diǎn)擊后面兩個(gè)方法，發(fā)現(xiàn)會(huì)有報(bào)錯(cuò)

這個(gè)什么原因呢？調(diào)試也可以發(fā)現(xiàn)，作用域的問(wèn)題，調(diào)用不了vuex里面的對(duì)象

    const dispatch = this.dispatch
        this.dispatch = (...args) =>{
            dispatch.apply(this,args)
        }

完整代碼

import { createAction, mergeObjects } from "./util"
let Vue //存儲(chǔ)Vue變量。一是為了注入$store到各個(gè)Vue組件，二是后續(xù)要用到Vue的雙向綁定的功能
export class Store{
    constructor ({
        state = {},
        actions = {},
        mutations = {}
        }){
        //加上這個(gè)，解決在外面調(diào)用dispatch的問(wèn)題
        const dispatch = this.dispatch
        this.dispatch = (...args) =>{
            dispatch.apply(this,args)
        }
        //依賴vue雙向綁定
        this._vm = new Vue({
            data : state
        })
        this.actions = Object.create(null)
        //構(gòu)造下action。兼容字符串和function兩種模式
        this._setupActions(actions);
        //構(gòu)造mutations
        this._setupMutations(mutations);
    }
    get state (){
        //頁(yè)面中通過(guò)此方法獲取state
        return this._vm._data;
    }
    set state (v){
        throw new Error("[Vuex] vuex root state is read only.")
    }
    _setupActions (actions){
        this._actions = Object.create(null);
        actions = Array.isArray(actions) ? mergeObjects(actions) : actions;
        Object.keys(actions).forEach(name =>{
            this._actions[name] = createAction(actions[name],this); //兼容string 和function的寫法
            if(!this.actions[name]){
                this.actions[name] = (...args) =>this._actions[name](...args)
            }
        })
    }
    _setupMutations(mutations){
        this._mutations = Array.isArray(mutations) ? mergeObjects(mutations,true) : mutations
    }
    /**
     * 執(zhí)行mutation
     */
    dispatch (type,...payload) {
        const mutation = this._mutations[type];
        const state = this.state;
        if(mutation){
            this._dispatching = true
            if(Array.isArray(mutation)){
                //遍歷執(zhí)行
                mutation.forEach(m =>m(state,...payload))
            }else{
                mutation(state,...payload)
            }
            this._dispatching = false
        }else{
            console.warn("[vuex] unknown mutation:${type}")
        }
    }
}
export function install (_Vue){
    Vue = _Vue
    const _init = Vue.prototype._init;
    Vue.prototype._init = function(options){
        options = options || {}
        if(options.store){
            this.$store = options.store
        }else if(options.parent && options.parent.$store){
            this.$store = options.parent.$store
        }
        _init.call(this,options)
    }
}
export default {
    Store,install
}

只此。VUEX的基本功能已完成了

以上代碼都來(lái)至vuex 0.3
我不生成代碼，只做代碼的搬運(yùn)工
測(cè)試代碼在這里
https://github.com/denditang/...

云服務(wù)器 GPU云服務(wù)器 php從0開始從0開始學(xué)習(xí)php 匯編語(yǔ)言從0開始從0開始數(shù)據(jù)分析

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/85004.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

tinysun1234

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

安裝tensorflow1.14

閱讀 2199·2023-04-25 17:48
如何建立虛擬主機(jī)-如何創(chuàng)建虛擬主機(jī)？

閱讀 3652·2021-09-22 15:37
大家用云主機(jī)做什么-云主機(jī)可以做什么？

閱讀 2989·2021-09-22 15:36
主機(jī)ip是什么-主機(jī)ip地址有什么要求？

閱讀 6143·2021-09-22 15:06
content 內(nèi)容生成技術(shù)1

閱讀 1695·2019-08-30 15:53
用code打造自己的過(guò)渡動(dòng)畫

閱讀 1496·2019-08-30 15:52
圖片輪播組件實(shí)現(xiàn)

閱讀 780·2019-08-30 13:48
網(wǎng)頁(yè)與瀏覽器窗口の真理

閱讀 1186·2019-08-30 12:44

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

從0開始寫一個(gè)自己的Vuex

相關(guān)文章

一個(gè)JAVA WEB偽全棧的VUE入坑隨筆:從登錄開始（VUEX）

關(guān)于Vue2一些值得推薦的文章 -- 五、六月份

關(guān)于Vue2一些值得推薦的文章 -- 五、六月份

從零開始做Vue前端架構(gòu)（9）

發(fā)表評(píng)論

0條評(píng)論

tinysun1234

男|高級(jí)講師

TA的文章

安裝tensorflow1.14

如何建立虛擬主機(jī)-如何創(chuàng)建虛擬主機(jī)？

大家用云主機(jī)做什么-云主機(jī)可以做什么？

主機(jī)ip是什么-主機(jī)ip地址有什么要求？

content 內(nèi)容生成技術(shù)1

用code打造自己的過(guò)渡動(dòng)畫

圖片輪播組件實(shí)現(xiàn)

網(wǎng)頁(yè)與瀏覽器窗口の真理

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

從0開始寫一個(gè)自己的Vuex

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！