04 Vuex 基礎知識點

2021-10-23 14:33:11 字數 2151 閱讀 7717

三、vue-x核心內容

3.2 getter內容

3.3 mutation內容

3.4 action內容

3.5 module內容

vue-x是專為vue.js應用程式開發的狀態管理模式,提供乙個在多個元件間共享狀態的外掛程式。它的作用是將多個元件共享的變數全部儲存在乙個物件裡,物件是存放在頂層的vue例項中,可供其他元件進行使用。

3.1.1 state的單一狀態樹概念

單一狀態樹,也稱單一資料來源(single source of truth)。採用乙個store物件來管理應用層的全部狀態,這樣以便對資料的管理與維護。

3.2.1 getters的使用

對state的資料進行加工處理

const store =

newvuex.store(

getters:}}

);

}

3.3.1 mutations狀態更新

mutations是用來更新store狀態的唯一方式

const store =

newvuex.store

( mutations:

// 帶引數方法:

addnumparameter

(state,para)}}

);

通過commit呼叫store檔案裡mutations裡方法來修改的狀態

3.3.2 mutations提交方式

普通方式提交

const store =

newvuex.store

(addnumparameter

(state,para)}}

);

型別方式提交

const store =

newvuex.store

(addnumparameter

(state,payload)}}

);

3.3.3 mutations響應規則

vuex的store中的state是響應式,當state中資料發生變化時vue元件會自動更新,因此mutatons面對state的響應式有需要遵循的規則。

state的變數或者物件等需要初始化完善,當採用非響應式的方式給已定義的變數或物件等新增屬性,該屬性不會進行響應式的渲染在元件中

給state變數或者物件等採用響應式的方式新增刪除屬性使用以下方式:

vue.(state.numobj,『newpara』,100) 新增屬性

vue.delete(state.numobj,『oldpara』) 刪除屬性

mutation中的方法必須是同步操作,若mutatios中定義的方法採用非同步操作,devtool除錯工具無法及時的捕捉與跟蹤該方法處理後資料的響應式狀態。

3.4.1 actions的使用

vuex處理一些非同步操作時會借助action來完成這項任務。

非同步修改資訊

3.5.1 modules的使用

vuex使用單一狀態樹的模式來管理公共資料,但遇到複雜與龐大的資料時,需要採用module把store進行分割為不同的模組,方便對資料進行有層次的管理。

const module1 =

, mutations:

, actions:

, getters:

}const module2 =

, mutations:

, actions:

, getters:

}const store =

newvuex.store

( mutations:

, actions:

, getters:

, modules})

;

vueX基礎知識點筆記

vuex是專門用來管理vue.js應用程式中狀態的乙個外掛程式。他的作用是將應用中的所有狀態都放在一起,集中式來管理。需要宣告的是,這裡所說的狀態指的是vue元件中data裡面的屬性。簡單的來說,它就是儲存公共變數的東西,然後外掛程式可以通過它來訪問,或者修改資料,來達到響應式.相當於乙個倉庫,裡面...

基礎知識點

1 inline block布局 2 table布局 3 justify的末行不對齊 4 兩個圖示之間有空格 換行 5 背景中的的 路徑的 全部斜槓都為 不是 命令列下的這種 doctype html html head meta charset utf 8 title xx title head ...

erlang基礎知識點

1 變數是不可改變的,必須以首字母大寫開頭 2 字串就是小寫字母,或者單引號引起來的字串 3 賦值可以使用匹配模式 4 資料結構有元組,取值用匹配模式來取值 就能取到x,b的值 5 資料結列表 ss,aa,取值是用 head foot 的形式取值 頭和尾的形式匹配 6 字串只能用雙引號表示 7 函式...