vuex設計思想

2021-10-07 18:52:19 字數 2601 閱讀 3136

vuex的安裝十分簡單,只需要提供乙個store,然後執行下面兩句**即完成的vuex的引入。

vue.use(vuex);

new vue();

vuex通過全域性 mixin 方法新增一些元件選項,在vue的beforecreacte鉤子中將vuex的store例項掛載到元件的$store屬性上。

var vuex = {}

vuex.install = function (vue, options)

// 下面是原始碼

/*const options = this.$options

if (options.store) else if (options.parent && options.parent.$store)

*/})

}vue.use(vuex)

const store = new vue.store(

})window.vm = new vue();

// vm.$store === store true

因為vue本身是資料響應式的,所以才會有通過new vue建立乙個vue-bus來實現元件之間的通訊。

同理,vuex是乙個專門為vue.js框架設計的、用於對vue.js應用程式進行狀態管理的庫,vuex在store內部實現了乙個vue-bus,就可以滿足乙個狀態管理的功能。

在store內部實現vue-bus之後,還有些細節需要完善

每乙個元件中都要能夠訪問到store例項,這才才可以在每個元件中都管理狀態。通過上面的安裝原理就已經實現了。

實現對bus的資料監聽

var globaldata = ;

new vue(}}

});vue.prototype.globaldata = globaldata;

// 在任意模板中}

globaldata.d進行修改,我們發現模板中的globaldata.d發生了變化

模板中}實際是this.globaldata.d

這時候再來看下原始碼

/* 通過vm重設store,新建vue物件使用vue內部的響應式實現註冊state以及computed */

function resetstorevm (store, state, hot)

const computed = {}

/* 通過object.defineproperty為每乙個getter方法設定get方法,比如獲取this.$store.getters.test的時候獲取的是store._vm.test,也就是vue物件的computed屬性 */

// use computed to leverage its lazy-caching mechanism

computed[key] = () => fn(store)

object.defineproperty(store.getters, key, )

})// use a vue instance to store the state tree

// suppress warnings just in case the user has added

// some funky global mixins

const silent = vue.config.silent

/* vue.config.silent暫時設定為true的目的是在new乙個vue例項的過程中不會報出一切警告 */

vue.config.silent = true

/* 這裡new了乙個vue物件,運用vue內部的響應式實現註冊state以及computed*/

store._vm = new vue(,

computed

})vue.config.silent = silent

// enable strict mode for new vm

/* 使能嚴格模式,保證修改store只能通過mutation */

if (store.strict)

if (oldvm) )

}vue.nexttick(() => oldvm.$destroy())

}}

簡化

// 簡化下設計思想

const sore = new vuex.store()

// vuex.store 建構函式

class store ) = options

resetstorevm(this, state)

} get state ()

}// resetstorevm

function resetstorevm (store, state, hot)

})}// new store

const store = new store(

})// store._vm

// store.state 返回 store._vm._data.$$state

// vue.use

vue.mixin(

})// 使用

this.$store.state...

}

FLASH設計思想

flash 設計思想 在中國的發展經歷了 5年的時間,起初只是一些愛好者出於個人興趣製作的 flash 作品,傳到網上以供網民瀏覽,因為更多的人喜好這種表現形式,以及商家對網路發展態勢的看好,早期的那些創作者開始承接商業廣告。自此,flash 廣告的製作逐漸興盛。flash 作為一款向量圖形和動畫製...

js設計思想

程式是什麼?生活中的程式 1 宿舍保修 填寫維修單 商報宿舍管理員 聯絡物業 找師傅上門維修 反饋 2 銀行開戶 客戶填寫開戶申請單 提交證件資料 審核資料真實性第一種 如果是本人 資料真實齊全則通過 第二種 其他人代辦 有委託書 資料真實齊全則通過。不滿足則拒絕 錄入系統開戶 設定密碼 發放卡 存...

linux unix設計思想

看了 linux unix設計思想 這本書,覺得書的大部分內容都閒扯的太遠了,以下簡單的總結下本書的核心,幫助大家節省時間和金錢。linux unix設計思想 1 程式應該小而專一,程式應該盡量的小,且只專注於一件事上,不要開發那些看起來有用但是90 的情況都用不到的特性 2 程式不只要考慮效能,程...