Vuex的深入學習

2022-02-22 09:07:39 字數 1707 閱讀 3749

一、狀態管理vuex

1.vuex使用

vuex是乙個專為vue.js應用程式開發的狀態管理模式。它採用集中式儲存管理應用的所有元件的狀態,並以對應的規則保證狀態以一種可**的方式發生變化。

(1)state:單一狀態書,每個應用將僅僅包含乙個store例項

*this.$store.state.狀態名字

*...mapstate(['title'])

(2)getters:可以從store中派生一些狀態,getters的返回值會根據它的依賴快取起來,且只有當它的依賴值發生了改變才會被重新計算

*可以認為是store的計算屬性

*this.$store.getters.計算屬性名字

*...mapgetters(['getfilms'])

(3)mutations:更改vuex的store中的狀態的唯一辦法就是提交mutation。

*常量的設計風格

[some_mutation](state){  

//mutate state

*必須是同步函式

*this.$store.commit('type','payload')

(4)actions

*action提交的是mutation,而不是直接變更狀態。

*action可以包含任意非同步操作

*this.$store.dispatch('type','payload')

(5)模組分割

如果希望你的模組具有更高的封裝度和復用性,你可以通過新增namespaced:true的方式使其成為帶命名空間的模組。當模組被註冊後,它的所有getter、action、及mutation都會自動根據模組註冊的路徑調整命名。例如:

2.注意

(1)應用層級的狀態應該集中到單個store物件中

(2)提交mutation是更改狀態的唯一辦法,並且這個過程是同步的

(3)非同步邏輯都應該封裝到action裡面

3.vue chrome devtools

這是乙個谷歌瀏覽器的外掛程式,做前端開發的it工程師應該比較熟悉這款工具,可以邊側邊欄窗格中的頁面,邊檢查**。由於vue是資料驅動的,所以這就存在在開發除錯中檢視dom結構並不能解析出什麼。但是借助vue-devtools外掛程式,我們就可以很容易的對資料結構進行解析和除錯。例如:

二、vuex在專案中的使用

1.複雜非父子通訊

2.非同步資料快照,可以實現優化

三、vuex的資料持久化

用過vuex的肯定會有這樣乙個痛點,就是重新整理以後vuex裡面儲存的state就會被瀏覽器釋放掉,因為我們的state都是儲存在記憶體中的。所以我們通過 vuex-persistedstate這個外掛程式,來實現將資料儲存到本地。用法很簡單: 如圖:

vuex深入學習 Module

vuex深入學習 module 由於使用單一狀態樹,應用的所有狀態會集中到乙個比較大的物件。當應用變得非常複雜時,store 物件就有可能變得相當臃腫。為了解決以上問題,vuex 允許我們將 store 分割成模組 module 每個模組擁有自己的 state mutation action get...

陣列的深入學習

在以前的學習中,對陣列的認識只是簡單的陣列形式,儲存數,但深入學習其實現機理,發現大有文章,下面簡單表述一下 一 陣列是乙個型別,這個從陣列的定義說起 陣列的定義有兩種方式 以int為例,1.int a 2.int a 第一種定義方法是很多人習慣的,主要是早期的影響,第二種方法才是最適合的定義方法,...

margin的深入學習

簡單地說,外邊距合併指的是,當兩個垂直外邊距相遇時,它們將形成乙個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。實際工作中,垂直外邊距合併問題常見於第乙個子元素的margin top會頂開父元素與父元素相鄰元素的間距,而且只在標準瀏覽器下 firffox chrome ope...