HTML基礎(chǔ)知識(24)

一、vuex

簡單來說:對vue應(yīng)用中多個組件的共享狀態(tài)進(jìn)行集中式的管理(讀/寫)

1、狀態(tài)自管理應(yīng)用

(1)state:驅(qū)動應(yīng)用的數(shù)據(jù)源

(2)view:以聲明方式將state映射到視圖

(3)actions:響應(yīng)在view上的用戶輸入導(dǎo)致的狀態(tài)變化(包含n個更新狀態(tài)的方法)


2、多組件共享狀態(tài)的問題

(1)多個視圖依賴于同一狀態(tài)

(2)來自不同視圖的行為需要變更同一狀態(tài)

(3)以前的解決辦法

? ? ? ? ? a.將數(shù)據(jù)以及操作數(shù)據(jù)的行為都定義在父組件

? ? ? ? ? b.將數(shù)據(jù)以及操作數(shù)據(jù)的行為傳遞給需要的各個子組件(有可能需要多級傳遞)

(4)vuex 就是用來解決這個問題的

3、vuex核心概念

(1)state

? ? ? ? vuex 管理的狀態(tài)對象

? ? ? ? 它應(yīng)該是唯一的

const state = {

xxx: initValue

}

(2) mutations

? ? ? ? 包含多個直接更新 state 的方法(回調(diào)函數(shù))的對象

? ? ? ? 誰來觸發(fā): action 中的 commit('mutation 名稱')

? ? ? ? 只能包含同步的代碼, 不能寫異步代碼

const mutations = {

yyy (state, {data1}) {

// 更新 state 的某個屬性

}

}

(3) actions

? ? ? ? 包含多個事件回調(diào)函數(shù)的對象

? ? ? ? 通過執(zhí)行: commit()來觸發(fā) mutation 的調(diào)用, 間接更新 state

? ? ? ? 誰來觸發(fā): 組件中: $store.dispatch('action 名稱', data1) // 'zzz'

? ? ? ? 可以包含異步代碼(定時器, ajax)

const actions = {

zzz ({commit, state}, data1) {

commit('yyy', {data1})

}

}

(4) getters

? ? ? ? 包含多個計算屬性(get)的對象

? ? ? ? 誰來讀取: 組件中: $store.getters.xxx

const getters = {

mmm (state) {

return ...

}

}

(5) modules

? ? ? ? 包含多個 module

? ? ? ? 一個 module 是一個 store 的配置對象

? ? ? ? 與一個組件(包含有共享數(shù)據(jù))對應(yīng)

(6)向外暴露 store 對象

export default new Vuex.Store({

state,

mutations,

actions,

getters

})

(7) 組件中

import {mapState, mapGetters, mapActions} from 'vuex'

export default {

computed: {

...mapState(['xxx']),

...mapGetters(['mmm']),

}

methods: mapActions(['zzz'])

}

{{xxx}} {{mmm}} @click="zzz(data)"

(8) 映射 store

import store from './store'

new Vue({

store

})

(9) store 對象

? ? ? ? 有用 vuex 管理的組件中都多了一個屬性$store, 它就是一個 store 對象

? ? ? ? 屬性:

? ? ? ? state: 注冊的 state 對象

? ? ? ? getters: 注冊的 getters 對象

? ? ? ? 方法:

? ? ? ? dispatch(actionName, data): 分發(fā)調(diào)用 action

二、可迭代對象

1、我們已經(jīng)知道可以對list、tuple、str等類型的數(shù)據(jù)使用for...in...的循環(huán)語法從其中依次拿到數(shù)據(jù)進(jìn)行使用,

我們把這樣的過程稱為遍歷,也叫迭代。

我們把可以通過for...in...這類語句迭代讀取一條數(shù)據(jù)供我們使用的對象稱之為可迭代對象(Iterable)**。

2、迭代器

迭代是訪問集合元素的一種方式。迭代器是一個可以記住遍歷的位置的對象。迭代器對象從集合的第一個元素開始訪問,

直到所有的元素被訪問完結(jié)束。迭代器只能往前不會后退。

3、如何判斷一個對象是否可以迭代

可以使用 isinstance() 判斷一個對象是否是 Iterable 對象

4、可迭代對象的本質(zhì)

可迭代對象的本質(zhì)就是可以向我們提供一個這樣的中間“人”即迭代器幫助我們對其進(jìn)行迭代遍歷使用。

可迭代對象通過__iter__方法向我們提供一個迭代器,我們在迭代一個可迭代對象的時候,實際上就是先獲取該對象提供的一個迭代器,

然后通過這個迭代器來依次獲取對象中的每一個數(shù)據(jù).

那么也就是說,一個具備了__iter__方法的對象,就是一個可迭代對象。

5、iter()函數(shù)與next()函數(shù)

list、tuple等都是可迭代對象,我們可以通過iter()函數(shù)獲取這些可迭代對象的迭代器。

然后我們可以對獲取到的迭代器不斷使用next()函數(shù)來獲取下一條數(shù)據(jù)。iter()函數(shù)實際上就是調(diào)用了可迭代對象的__iter__方法。

注意,當(dāng)我們已經(jīng)迭代完最后一個數(shù)據(jù)之后,再次調(diào)用next()函數(shù)會拋出StopIteration的異常,來告訴我們所有數(shù)據(jù)都已迭代完成,不用再執(zhí)行next()函數(shù)了。

三、生成器

生成器是一類特殊的迭代器。

1、創(chuàng)建生成器的方法1

要創(chuàng)建一個生成器,有很多種方法。第一種方法很簡單,只要把一個列表生成式的 [ ] 改成 ( )

2、創(chuàng)建生成器的方法2

斐波那契數(shù)列

簡單來說:只要在def中有yield關(guān)鍵字的 就稱為 生成器

四、協(xié)程

協(xié)程是python個中另外一種實現(xiàn)多任務(wù)的方式

自帶CPU上下文。

只要在合適的時機(jī), 我們可以把一個協(xié)程 切換到另一個協(xié)程。 只要這個過程中保存或恢復(fù) CPU上下文那么程序還是可以運(yùn)行的。

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

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

  • vuex Vuex 是什么? Vuex 是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理...
    無藥可救的渣渣閱讀 223評論 0 0
  • 安裝 npm npm install vuex --save 在一個模塊化的打包系統(tǒng)中,您必須顯式地通過Vue.u...
    蕭玄辭閱讀 3,036評論 0 7
  • Vuex是什么? Vuex 是一個專為 Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應(yīng)用的所有組件...
    蕭玄辭閱讀 3,231評論 0 6
  • Vuex 的學(xué)習(xí)記錄 資料參考網(wǎng)址Vuex中文官網(wǎng)Vuex項目結(jié)構(gòu)示例 -- 購物車Vuex 通俗版教程N(yùn)uxt....
    流云012閱讀 1,538評論 0 7
  • 上一章總結(jié)了 Vuex 的框架原理,這一章我們將從 Vuex 的入口文件開始,分步驟閱讀和解析源碼。由于 Vuex...
    你的肖同學(xué)閱讀 1,886評論 3 16

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