vue源碼-vuex源碼解析-造輪子

vuex使用方法:

根據(jù)vuex使用方法分析:

1、vuex使用是一個(gè)插件。

2、需要實(shí)現(xiàn)vuex構(gòu)造函數(shù)Store類。

實(shí)現(xiàn)方式如下:

(1)state狀態(tài)管理器的實(shí)現(xiàn):

把用戶的傳遞過來的state放在data里,實(shí)現(xiàn)響應(yīng)式數(shù)據(jù)。由于state不能讓用戶隨意訪問,所以需要對(duì)state加上一層封裝,變成$$state:oprions.state。

然后實(shí)現(xiàn)state的get和set方法:

(2)mutation和actions實(shí)現(xiàn):

1、首先在store類里面,將用戶的方法進(jìn)行存儲(chǔ)。

2、實(shí)現(xiàn)mutation和actions調(diào)用的對(duì)應(yīng)的方法:

commit方法:

實(shí)現(xiàn)原理看圖片備注,entry就是用戶在mutation里寫的方法。由于mutation可以直接修改state里的值,所以函數(shù)第一個(gè)值可以直接傳state。

dispath方法:

實(shí)現(xiàn)思路與commit方法大致一樣,但是entyr出口函數(shù)傳遞的第一個(gè)參數(shù)不一樣。dispath函數(shù)里傳遞的是上下文,可以傳遞this,this里面包含了commit(),getter()、因?yàn)閐ispatch不能直接修改state里的值,不能直接傳遞state。

getters方法:

const computed = {}

? ? this.getters = {}

? ? const store = this

? ? Object.keys(this._wapperedGetter).forEach(key => {

? ? ? const fn = this._wrappedGetters[key]

? ? ? computed[key] = function() {

? ? ? ? return fn(store.state)

? ? ? }

? ? ? Object.defineProperty(store.getters, key, {

? ? ? ? get: () => store._vm[key]

? ? ? })

? ? })

3、實(shí)現(xiàn)vuex插件安裝,加入mixin混入,延遲到vue實(shí)例出來后,進(jìn)行store掛載。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 寫在前面 因?yàn)閷?duì)Vue.js很感興趣,而且平時(shí)工作的技術(shù)棧也是Vue.js,這幾個(gè)月花了些時(shí)間研究學(xué)習(xí)了一下Vue...
    染陌同學(xué)閱讀 1,712評(píng)論 0 12
  • Vuex源碼閱讀分析 Vuex是專為Vue開發(fā)的統(tǒng)一狀態(tài)管理工具。當(dāng)我們的項(xiàng)目不是很復(fù)雜時(shí),一些交互可以通過全局事...
    steinslin閱讀 687評(píng)論 0 6
  • 前言 HackerNews是基于 HN 的官方 firebase API 、Vue 2.0 、vue-router...
    osan閱讀 2,787評(píng)論 2 8
  • 一開始用vuex的時(shí)候我也十分疑惑,然后百度一下發(fā)現(xiàn)官網(wǎng)和大部分博客都說的是一個(gè)支持同步操作一個(gè)支持異步操作...
    zpkzpk閱讀 7,367評(píng)論 0 4
  • 前言 之前幾篇解析 Vue 源碼的文章都是完整的分析整個(gè)源碼的執(zhí)行過程,這篇文章我會(huì)將重點(diǎn)放在核心原理的解析,不會(huì)...
    心_c2a2閱讀 1,555評(píng)論 1 8

友情鏈接更多精彩內(nèi)容