vuex學習筆記

以下內容都是官網上進行學習，

單向資料流模式：state(驅動應用的資料來源) ------》view(以宣告方式將state對映到檢視) ------》actions(響應在view上的使用者輸入導致的狀態變化)------》state(更新源資料) -----》、、、再次迴圈，如下圖所示：

但是，當我們的大型專案遇到多個元件共享狀態時，單向資料流的簡潔性很容易被破壞：

由此誕生了vuex，我們的元件樹構成了乙個巨大的「檢視」，不管在樹的哪個位置，任何元件都能獲取狀態或者觸發行為，通過定義和隔離狀態管理中的各種概念並通過強制規則維持檢視和狀態間的獨立性，我們的**將會變得更結構化且易維護。

sotre（倉庫）裡面有應用的大部分state(狀態),

vuex 通過store選項，提供了一種機制將狀態從根元件「注入」到每乙個子元件中（需呼叫vue.use(vuex)）;

new
vue(}
`,computed: 
}}

當乙個元件需要獲取多個狀態的時候，將這些狀態都宣告為計算屬性會有些重複和冗餘。

為了解決這個問題，我們可以使用mapstate輔助函式幫助我們生成計算屬性

computed: mapstate([
//對映 this.count 為 store.state.count
'count'])

getter：可以認為是store的計算屬性，或者派生出來的狀態

就像計算屬性一樣，getter的返回值會根據它的依賴被快取起來，且只有當它的依賴值發生了改變才會被重新計算。

const store = new
vuex.store(,]},
getters: 
}})

mapgetters輔助函式

將store中的getter對映到區域性計算屬性：

import  from 'vuex'export 
default
}

如果想將乙個getter屬性領取乙個名字，使用物件形式：

...mapgetters()

... mapgetters() mutation: 用於更改vuex的store中的狀態的唯一方法是提交mutation. 每個mutation都有乙個字串的事件型別（type）和乙個**函式（handler）。這個**函式就是我們實際進行狀態更改的地方，並且它會接受state作為第乙個引數

const store = new
vuex.store(,
mutations: 
}})

在元件中呼叫commit提交改變：

store.commit('increment', 10)

mapmutations：

import  from 'vuex'export 
default
) }
}

由於mutation只能是同步函式，所以需要使用action來實現非同步函式

action:類似於mutation，不同在於：

action 提交的是mutation，而不是直接變更狀態（狀態還是在mutation來變更）。

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

const store = new
vuex.store(,
mutations: 
},actions: 
}})

在元件中使用：

//
以載荷形式分發
store.dispatch('incrementasync', )
//以物件形式分發
store.dispatch()

mapactions輔助函式：

import  from 'vuex'export 
default
) }
}

總結： store----》倉庫；倉庫裡面有state-------》狀態；狀態可以進行重寫（派生）------》getter(相當於state的計算屬性)；計算屬性可以在元件裡面通過this.$store.state.屬性名使用，或者通過mapgetters輔助函式來使用...mapgetters([屬性名1，屬性名2....])來使用，如果需要實時監聽它的變化，需要放在couputed裡面; 元件發生改變需要通過mutation去更新狀態（state）, 可以通過this.$store.commit('屬性名',更新的值)來更新狀態，或者通過mapmutations輔助函式來實現：放在methods裡面...mapmutations(['方法1'，'方法名2'])，然後在需要狀態值改變的地方呼叫this.方法名1（更新的值）.... 由於mutation不能非同步更新，所以引入了action,

可以通過this.$store.dispatch('屬性名',更新的值)來更新狀態，或者通過mapactions輔助函式來實現：放在methods裡面...mapactions(['方法1'，'方法名2'])，然後在需要狀態值改變的地方呼叫this.方法名1（更新的值）

以上是個人學習筆記，有不對的地方希望各位大佬指教。。。

vuex學習筆記

vuex學習筆記

vuex學習筆記

vue學習筆記 vuex

相關推薦