從0開始寫一個自己的Vuex

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

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

Vuex從0開始學習源碼 前言

嘗試從0開始，寫一個Vuex(主要是copy vuex的源代碼)，從中學習下vuex的源代碼.先來看下列子中是怎么使用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作為一個插件先得實現(xiàn)install方法。同時我們在install方法里面在Vue組件注入$store,也就是為什么vue中各個子組件為什么能夠通過this.$store訪問到store這個對象

let Vue //存儲Vue變量。一是為了注入$store到各個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
}

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

第二步暴露state

我們使用vuex的時候,會傳入state給頁面訪問，同時支持當頁面中用到state里面的變量的時候。及時更新狀態(tài)。這里就會Vue的另外一個功能，雙向綁定。

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

    }
    get state (){
        //頁面中通過此方法獲取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
}

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

第三步實現(xiàn)actions

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

import { createAction, mergeObjects } from "./util"
let Vue //存儲Vue變量。一是為了注入$store到各個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 (){
        //頁面中通過此方法獲取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

這步比較簡單，直接看代碼

import { createAction, mergeObjects } from "./util"
let Vue //存儲Vue變量。一是為了注入$store到各個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 (){
        //頁面中通過此方法獲取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
}

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

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

import { createAction, mergeObjects } from "./util"
let Vue //存儲Vue變量。一是為了注入$store到各個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 (){
        //頁面中通過此方法獲取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
}

到此為止測試頁面的+ -count功能應該是沒有問題了

當點擊后面兩個方法，發(fā)現(xiàn)會有報錯

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

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

完整代碼

import { createAction, mergeObjects } from "./util"
let Vue //存儲Vue變量。一是為了注入$store到各個Vue組件，二是后續(xù)要用到Vue的雙向綁定的功能
export class Store{
    constructor ({
        state = {},
        actions = {},
        mutations = {}
        }){
        //加上這個，解決在外面調(diào)用dispatch的問題
        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 (){
        //頁面中通過此方法獲取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的基本功能已完成了

以上代碼都來至vuex 0.3
我不生成代碼，只做代碼的搬運工
測試代碼在這里
https://github.com/denditang/...

云服務器 GPU云服務器 php從0開始從0開始學習php 匯編語言從0開始從0開始數(shù)據(jù)分析

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/85004.html

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

摘要：此文章用于記錄本人學習歷程，有共同愛好者可加好友一起分享。從上周天，由于本周有公司籃球比賽，所以耽誤兩天晚上，耗時三個晚上勉強做了一個登錄功能。這里的用戶信息和登錄狀態(tài)都是直接取的中的用戶信息進行屬性值初始化。此文章用于記錄本人VUE學習歷程，有共同愛好者可加好友一起分享。從上周天，由于本周有公司籃球比賽，所以耽誤兩天晚上，耗時三個晚上勉強做了一個登錄功能。中間的曲折只有自己知道，有...

Zack 2019-08-20 15:47 評論0 收藏0
關于Vue2一些值得推薦的文章 -- 五、六月份

摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。五、六月份推薦集合查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。蘇...

sutaking 2019-08-02 15:17 評論0 收藏0
關于Vue2一些值得推薦的文章 -- 五、六月份

摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。五、六月份推薦集合查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。蘇...

khs1994 2019-08-23 18:08 評論0 收藏0
從零開始做Vue前端架構(gòu)（9）

摘要：那該怎么管理這兩個不同的項目呢解決子模塊用的的同學肯定一下子就想到子模塊的知識了。最后，也希望有想法的同學還有大佬多多留言，給點建議原文地址從零開始做前端架構(gòu)腳手架參考資料官方文檔使用定制前端腳手架別人寫的腳手架文件操作相關文檔子模塊前言相信很多人都用過vue-cli或create-react-app或者類似的腳手架。腳手架方便我們復制，粘貼，或者clone代碼庫，而且還可以更具用...

Vicky 2019-06-24 18:01 評論0 收藏0