我與Vuex的第一次邂逅

new
vue(
},//
view
template: `
}`,//
actions
methods: 
}})

上面是我們定義的乙個vue的例項

vuex 是乙個專為 vue.js 應用程式開發的狀態管理模式

what is 狀態管理模式?

狀態管理模式

1:state:驅動應用的資料來源,比如元件當中的data就是資料來源

2:view:以宣告的方式將state對映到檢視,比如元件上面的那些標籤

3:actions:響應在檢視view上面使用者操作導致的狀態變化,比如元件當中methods中的事件

//自己的理解,他們三有啥共同點? count,他們三都用到了這個值,如果只是單個元件中用到這個值,那麼還可以控制,如果是多個元件同時用到這個資料呢?

//store就是將這些共享的狀態抽出來,用乙個全域性單例模式進行管理

重點:全域性--表示所有的元件都可以訪問

:單例--表示vuex只有乙個例項

這是乙個store的例項,暫時還沒有加入模組

export default

newvuex.store()

構造器選項的解析:

state:型別為物件或者函式,如果是物件的話就會被當做根state,如果傳入的是乙個返回物件的函式,那麼返回的物件作為根state
作用:存放資料
全域性訪問 
this.$store.state--將store注入到了根節點的情況
//state物件屬性可以定義成所有資料型別
const state =, //
使用者資訊
orderlist: , //
訂單列表
orderdetail: null, //
訂單產品詳情
login: false, //
是否登入
numver:1,
myfunction:
function
() ,
}

當我們元件需要使用這個狀態的時候,並且隨著狀態改變,元件的檢視也會改變,那麼最簡單的方式就是在計算屬性中返回某個狀態
const counter =}
`,computed: 
}}//待續...如果元件需要多個狀態呢?十個狀態就要寫十個計算實屬性嗎?

打個比方,你返回了乙個陣列,但是我們需要的是排序後的陣列,並且多個元件都需要這個排序後的陣列,解決辦法無非是每個元件都重新進行對陣列排序,或者寫乙個公共的方法,然後每個元件都引用這個方法

vuex 允許我們在 store 中定義「getter」（可以認為是 store 的計算屬性）。就像計算屬性一樣，getter 的返回值會根據它的依賴被快取起來(當通過屬性訪問的時候)，且只有當它的依賴值發生了改變才會被重新計算,

注意:getter 在通過方法訪問時,每次都會去進行呼叫,而不會快取結果

getters:,沒錯這貨是物件,並且他的所有屬性都必須為函式
const getters =,
mysecondgetter:
function
(state,getters)
}}作用:定義計算屬性 
//是的,計算屬性,只不過這些計算屬性是依賴state裡面的資料
原因:我們確實可以在元件中對state的資料進行操作,但是多個元件獲取同乙個狀態,都要進行相同的操作呢,那還不如我們集中管理.
全域性訪問 
this
.$store.getters
重點:所有的處理函式總是接收state作為第乙個引數 ,接收其他的getter作為第二個引數
getters裡面的方法的呼叫方式: 
1:以屬性的形式訪問store.getters.funname //
不要帶括號,不要帶括號,不要帶括號
2:以方法的形式訪問store.getters.funname(param) //
前提是這個定義的方法的返回值必須是個函式,且param是作為返回值函式的引數.
待續.... 但是函式的引數很奇怪啊

mutations:型別,乙個又乙個函式

官方文件解釋

作用:如果我們在各自的元件當中更改狀態的話,那麼必然導致其他的元件也會更新該狀態,最後我們都不知道到底是誰在更新這個狀態,所以採用mutations提交的形式進行狀態更改的管理,像不像git提交**的形式...

全域性訪問

this

.$store._mutations

重點:所有的**函式(也就是進行狀態更改的地方)總是接收state(沒錯就是上面的那個state)作為第乙個引數

mutations裡面的方法呼叫方式:

store.commit('funname')--這種是我們沒有把store注入到根元件

this.$store.commit('funname') --這種是注入了根元件,那麼在每乙個子元件都可以這種方式

然後我們還可以傳引數

this.$store.commit('funname',{}) 引數作為物件這樣可以包含多個字段

還有一種方式,使用包含type屬性的物件,

this.$store.commit()

重點:原則就是要記住 mutation 必須是同步函式

actions:型別,也是乙個又乙個函式,

官方文件解釋在**函式當中,我們進行狀態改變

全域性訪問

this

.$store._actions

actions裡面的方法呼叫方式: store.dispatch('funname') 同理於mutations

重點:所有的處理函式總是接收"context"作為第乙個引數,他是乙個物件... 乙個與 store 例項具有相同方法和屬性的物件

重點:action 與mutations的區別

1:action 提交的是 mutation，而不是直接變更狀態

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

module:vuex 允許我們將 store 分割成模組（module）。每個模組擁有自己的 state、mutation、action、getter
甚至於巢狀子模組,模組又是由幾個模組組成
const modulea =,
mutations: ,
actions: ,
getters: 
}const moduleb =,
mutations: ,
actions: 
}const store = new
vuex.store(
})1:對於模組內部的 mutation 和 getter，接收的第乙個引數是模組的區域性狀態物件 --state
2:對於模組內部的actions,區域性狀態通過 context.state暴露出來,根節點狀態則為 context.rootstate
3:對於模組內部的 getter，根節點狀態會作為第三個引數暴露出來

我與Vuex的第一次邂逅

與fastjson的第一次邂逅

第一次學習vuex

我的第一次

我與Vuex的第一次邂逅

與fastjson的第一次邂逅

第一次學習vuex

我的第一次

相關推薦