VUEX知識總結

2021-09-10 19:12:48 字數 1783 閱讀 7765

每乙個 vuex 應用的核心就是 store(倉庫)。「store」基本上就是乙個容器,它包含著你的應用中大部分的狀態 (state)。vuex 和單純的全域性物件有以下兩點不同:

vuex 的狀態儲存是響應式的。當 vue 元件從 store 中讀取狀態的時候,若 store 中的狀態發生變化,那麼相應的元件也會相應地得到高效更新。

你不能直接改變 store 中的狀態。改變 store 中的狀態的唯一途徑就是顯式地提交 (commit) mutation。這樣使得我們可以方便地跟蹤每乙個狀態的變化,從而讓我們能夠實現一些工具幫助我們更好地了解我們的應用。

下面我們就來開始總結vuex的幾個屬性,毫不客氣的說,徹底的了解了這5個屬性,vuex也就學會了

一:基本屬性

1. state:狀態管理物件,直接放到vue的計算屬性中即可

2. mutations:修改狀態的唯一方式,通過commit('')的方式修改狀態,只能執行同步操作,呼叫方式如下

1).this.$store.commit()

3. getters:可以理解為計算屬性,既然是計算屬性,就有vue響應式的特點

4. actions:為了滿足mutations中的非同步操作,只能用dispatch('')呼叫,可以呼叫mutation函式

const store = new vuex.store(,

mutations:

},actions:

}})

呼叫方式:

1).this.$store.dispatch()

5. modules:為了分擔store的壓力,每個module都可以有store的所有屬性(state、modules、getters、mutaions、actions)等,難點可能在於命名空間,以後會講解講解

二: 快捷方式

mapgetters

import  from 'vuex'

export default

}

mapstate

computed: mapstate([

// 對映 this.count 為 store.state.count

'count'

])

mapmutations

// store.js

import vuex from 'vuex'

import from './mutation-types'

const store = new vuex.store(,

mutations:

}})

mapactions 

import  from 'vuex'

export default )

}}

modules

const modulea = ,

mutations: ,

actions: ,

getters:

}const moduleb = ,

mutations: ,

actions:

}const store = new vuex.store(

})store.state.a // -> modulea 的狀態

store.state.b // -> moduleb 的狀態

未完待續...

Vue知識點總結(VUEX篇)

vuex 是什麼?運用到了js設計模式中的單例模式,單例模式想要做到的是,不管我們嘗試去建立多少次,它都只給你返回第一次所建立的那唯一的乙個例項。vuex 使用單一狀態樹,用乙個物件就包含了全部的應用層級狀態。至此它便作為乙個 唯一資料來源 ssot 而存在。這也意味著,每個應用將僅僅包含乙個 st...

前端知識總結(二) vuex包括哪些內容

主要包括以下幾個模組 state 定義了應用狀態的資料結構,可以在這裡設定預設的初始狀態。getter 允許元件從 store 中獲取資料,mapgetters 輔助函式僅僅是將 store 中的 getter 對映到區域性計算屬性。mutation 是唯一更改 store 中狀態的方法,且必須是同...

Vuex 學習總結

好在之前接觸過 flux,對於理解 vuex 還是很有幫助的。react 學到一半,後來因為太忙,就放棄了,現在也差不多都忘記了。不過感覺 vuex 還是跟 flux 還是有點區別的。對於很多新手來說,只是閱讀文件是不好消化,我的建議是看看 vuex 的例項,通過研究例項來學習vuex。這樣就會好理...