封裝vuex,實現其基礎功能

2021-10-03 13:06:30 字數 3504 閱讀 6557

<

!doctype html>

"en"

>

"utf-8"

>

"viewport" content=

"width=device-width, initial-scale=1.0"

>

"x-ua-compatible" content=

"ie=edge"

>

document<

/title>

<

/head>

>}}

<

/child>

<

/div>

"node_modules/vue/dist/vue.js"

>

<

/script>

// vuex:只要改變了state,凡是依賴state的元件都會高效的更新;

// new vue的data屬性;

let vuex =

(function()

// 為了能讓資料能夠監聽到,當資料發生改變,依賴的檢視也要更新的;

let vm =

newvue(}});

this

.state = vm.state;

// this==> $store

this

.mutations =

;let mutations = options.mutations;

//這個就是傳遞進來的那個mutations

// object.keys : 把物件中的屬性名挑出來放到乙個陣列中

// 就是在例項身上準備乙個mutations物件,裡面包含了options外界傳遞進來的方法,那麼方法中的this已經是指向了store這個例項;

object.

keys

(options.mutations)

.foreach

(key =>})

;// 執行私有屬性的方法時,呼叫原型上的方法;

let commit =

this

.commit;

// 把原型的commit給了變數commit;

this

.commit

=(type, option)

=>

this

.commit

=function

(type, option)

// actions

this

.actions =

;let actions = options.actions ||

; object.

keys

(actions)

.foreach

(key =>})

;let dispatch =

this

.dispatch;

this

.dispatch

=(type, option)

=>

// getters

this

.getters =

;let getters = options.getters ||

; object.

keys

(getters)

.foreach

(key =>})

;});

}// 把commit 放到store的原型上

commit

(type, payload)

dispatch

(type, option)

}function

mapstate

(ary)

; ary.

foreach

(key =>})

return obj;

}function

mapgetters

(ary)

; ary.

foreach

(key =>})

return obj;

}function

mapactions

(ary)

; ary.

foreach

(key =>})

return obj;

}function

mapmutations

(ary)

; ary.

foreach

(key =>})

return obj;

}// ...vuex.mapstate(["count"])

function

install

(_vue)

else}}

)}return})

();// vue的外掛程式必須使用vue.use;只是vuex會預設檢測到是vue的官方外掛程式,看不到vue.use;vue.use執行時,會預設呼叫裡面的install;

vue.

use(vuex)

;// vuex.store

// vuex.mapstate

// store 是store的乙個例項;並且這個例項最後放到了vue的例項屬性上;

let store =

newvuex.store(,

mutations:},

actions:

, val)},

getters:}}

);let child =

, methods:},

computed:

,...vuex.

mapstate([

'count'])

},template:

"}}增加"}

// $store 會新增到每乙個元件的例項上;

let vm =

newvue(,

// 把store的乙個例項給了這個store屬性

// 元件在註冊時,不會呼叫生命週期鉤子函式,

components:})

; 目前vm身上沒有$store

// $options:代表 :new的物件,會把物件中的鍵值對新增到當前例項的$options上

// 1.先準備vuex物件【store,install】;

// 2. vue.use執行呼叫了裡面install,install執行呼叫了vuex.mixin,對vue這個類進行了修改

// 3.生成了乙個store

// 4.new vue;把store放到了例項的$options

// 5.隨後vm的生命週期,執行了mixin中的beforecreate=>把options的store直接賦值給了例項的$store屬性;

<

/script>

<

/body>

<

/html>

封裝vue router,實現基礎功能

class vuerouter options 監聽當前頁面的hash值的切換 當第一次解析頁面時,會有乙個預設的hash值 迴圈遍歷routes,把path和component重新放入乙個新的物件中 this routemap routes.reduce prev,next this vuerou...

(46) 不用swapcase函式實現其功能

不用swapcase函式以實現其功能 實現swapcase函式 ascii碼方式 列表 元祖方式 def togglecase s 設定儲存結果的變數 result 大寫字母列表 upper a b c d e f g h i j k l m n o p q r s t u v w x y z 小寫...

php 實現分頁功能(class封裝了功能)

分頁是乙個很常見的功能,我這裡提供了分類類 class 用於前端頁面中的四個按鈕 首頁腳頁 上面的演示非常不直觀,但足可以證明這個類可以完成分頁功能。附有非常詳細的注釋,但需要有一定的 php 基礎。todo 分頁類 前端需傳遞兩個引數 請求方式 get num 每頁要顯示多少條資料 sum 一共有...