Vuex的核心原理

2021-10-22 17:12:01 字數 3107 閱讀 8922

import vue from

"vue"

;import vuex from

"vuex"

;vue.

use(vuex)

;let stroe =

newvuex.store(,

getter:},

mutations:,}

, actions:}}

)export

default stroe;

在main.js中

import vue from

"vue"

;import stroe from

"./store/index.js"

;new

vue(

);

得出這麼個結論

1.vuex中一定會有install方法-----

>因為vue.

use(vuex)就會執行vuex.install這個方法

2.vuex中會有乙個類store的這個類

因為他有new

vuex.store

()

myvuex.js中

let vue;

function

install

(_vue)

elseif(

this

.$parent)

}//在這個全域性混入的生命週期函式中,的執行順序是根元件->父元件->子元件的這樣的順序的})

;//這裡為什麼要用vue的全域性混入那,因為在new vue()之後,所有的其他vue例項中都會有這個store屬性,所以這裡用到了全域性的混入;

}

1.所以上面解決的是,在根元件中新增store之後,所有的子元件,都擁有了$store這個屬性了

2.原因vue.

use(vuex)

;//會執行vuex的install,我們在install方法中完成上的需求

3.我們利用vue的全域性混入的方式來為其他的元件新增這個屬性

myvux.js中的store類的實現

class

store

)傳入的那個物件

的結構為

// state:,

// mutations:

// },

// getters:

// },

// actions:

2.點state中的資料是響應式的,所以這裡我們借助vue中的響應式來解決這個問題

let vm =

newvue()

this

.state = vm.$data//這樣就解決了stat中的資料為響應式的問題了;

3.實現mutations

let mutations = obj.mutations;

this

.mutations =

object.

keys

(mutations)

.foreach

(key=>

1.這裡的迴圈遍歷的操作的目的就是,根據引數在this

.mutations中新增響應的方法,實現的

2.實現的原理就是,為this

.mutations新增對應的屬性,屬性值為函式,執行這個函式,就是執行mutations中的方法,

3.但是我們要保證mutations中的每乙個方法中的this,都是這類的例項

4.mutations中的第乙個引數也要是這個類的例項,

5.第三個引數就是傳遞的值;

6.所以我們裡面的函式呼叫就是mutations[key]

.call

(this

,this

,options);}

);//現在我們需要實現actions

this

.actions =

;let actions = obj.actions;

object.

keys

(actions)

.foreach

(key=>})

;//這裡的原理和mutations是差不多的

//實現getter

let getter = obj.getters;

this

.getter =

;let then =

this

; object.

keys

(getter)

.foreach

(key=>})

})};

//現在我們需要實現commit方法

commit

(type,options)

//實現dispatch

dispatch

(type,options)

}export

default

下面我們就要實現vuex中的輔助函式

export

function

mapstate

(arr=

) arr.

foreach

(key=>})

return obj;

}1.我們在使用mapstate時,是這樣使用的

computed:

2.所以他一定要能使用展開運算子 ...

3.computed是vue中的計算屬性,一般是每乙個屬性的屬性值,是乙個方法

所以obj[key]

=function()

export

function

mapmutations

(arr =

) arr.

foreach

(key=>})

return obj

}export

function

mapactions

(arr =

);arr.

foreach

(key=>})

return obj;

}

Vuex的核心概念

state 提供唯一的公共資料源,所有共享的資料都要統一放到 store 的 state 中進行儲存。建立store資料來源,提供唯一公共資料 const store newvuex.store 1.1 元件訪問 state 中資料的第一種方式 this store.state.全域性資料名稱1.2...

實現原理 Vuex的實現原理

你知道vuex如何工作的嗎?先來看下圖了解下 了解圖之後看來下 的實現原理吧 let vue class store this.mutations this.actions this.vm new vue const options if getters if mutations if action...

vuex原理筆記

本文總結自 將要點提煉為筆記,以便不時之需,安不忘危。核心可分為兩部分 1.vue.use vuex 本質上執行vuex的install方法,引數為vue vue賦給區域性物件 vue生命週期裡新增vuexinit 層層巢狀新增 store 2.建立store例項 前提是必須呼叫過vue.use v...