【SRH】------vue---對vuex的理解
阿新 • • 發佈:2018-12-30
一.vuex的理解
Vuex是一種狀態管理模式,它採用
集中式儲存管理應用的所有元件的狀態。
把元件的共享狀態抽取出來,以一個
全域性單例模式管理,在這種模式下,任何元件都能獲取狀態或者觸發行為,使程式碼更結構化,且易維護
使用場景:中大型單頁面開發
二.建立倉庫
每個Vuex的應用核心就是store(倉庫),包含著應用中大部分的狀態(屬性)
1. Vuex 的狀態儲存是響應式的。當 Vue 元件從 store 中讀取狀態的時候,若 store 中的狀態發生變化,那麼相應的元件也會相應地得到高效更新。
2. 你不能直接改變 store 中的狀態。改變 store 中的狀態的唯一途徑就是顯式地提交 (commit) mutation
3.建立store倉庫
引入vue
import Vue from "vue";
引入vuex
import Vuex from "vuex";
將vuex掛載在vue身上
Vue.use(Vuex);
//通過Vuex建立倉庫,共有5個物件
const store= new Vuex.Store({
state,
mutations,
actions,
getters,
module:{
}
})
//匯出倉庫
export default store
三.store的5個物件及作用
1.state:存放的是公共的狀態
元件中訪問公共狀態的兩種方式
1.如果沒有使用輔助函式-------this.$store.state.屬性
2.元件中使用了輔助函式mapState-------直接使用屬性
(computed中使用)輔助函式----mapState
2.mutations: 用來修改state的狀態(同步)
該物件下面所有的函式裡面都會有2個引數 一個是state 另一是params
該方法觸發的時候必須通過commit進行觸發
(methods中使用)輔助函式-----mapMutations
3.actions:用來進行非同步的請求(axios)和業務邏輯的操作
該物件下面所有的函式裡面都會有2個引數
引數1:是一個物件 物件裡面有commit和state
引數2:需要傳遞的引數
呼叫actions裡面的方法用兩種方式
1.未使用輔助函式--------通過dispatch--this.$store.dispatch("函式",引數)
2.使用輔助函式mapActions--------直接使用函式
(methods中使用)輔助函式--------mapActions
4.getters:當state裡面的狀態發生改變的時候getters裡面的方法就會執行
getters其實就是一個計算屬性
在getters裡面的每一個函式中都可以訪問到state
(computed中使用)輔助函式------mapGetters
5.modules:將模組進行分類
modules裡面存放的是一些子模組,store裡面有哪些屬性 子模組中也會有哪些屬性
但是需要注意的一點是:
1. 在匯出子模組的時候需要加一個作用域的限制 namespaced=true
2.當訪問子模組裡面的一些方法或者狀態的時候需要加上子模組的名字
例如
方法:
handleAdd:"tabStore/handleAdd";
狀態:
message:state=>state.tabStore.message
輔助函式
1.mapState()
computed:
...Vuex.mapState({
key:state=>state.key
})
2.mapMutations()
3.mapActions()
methods:
...vuex.mapActions({
add:"handleAdd"
})
4.mapGetters()
computed:
...VuexmapGetters({
key:"key"
})
vuex資料傳遞的流程
當元件進行資料修改的時候,我們需要呼叫dispatch來觸發actions裡面的方法。(actions裡面用來操作非同步和業務邏輯)actions裡面的每個方法中都會 有一個commit方法,當方法執行的時候會通過commit來觸發mutations裡面的方法進行資料的修改。 mutations裡面的每個函式都會有一個state引數,這樣就可以在mutations裡面進行state的資料修改 (mutations
資料的操作是同步的),因為資料是雙向繫結的,當資料修改完畢後,會傳導給頁面。頁面的資料也會發生改變