關於Vuex
當Vue.Js的專案規模越來越大,已經是有多個組件來組合而成時,而有些參數是屬於全域共用的參數,總不可能一層一層的傳遞到各組件之間。於是Vue.Js官方就出了vuex做為一個公共變數的管理套件。
以後端來想的話,可以把vuex當成一個專屬Vue.Js的前端資料庫,vue各組件除了自己存放在data()
裡的變數之外,還可以到vuex去使用、修改公共變數
官方文件寫的算是滿詳細了,但開始使用時還是有點卡卡,所以整理了一篇在遺忘時可以快速回找QQ~
名詞解釋
VUEX | 相當於Vue.Js的函式 | 說明 |
---|---|---|
state | data | 用於存放共用變數 |
mutations | methods | 1. vuex寫function時,首個參數為state,用以使用state變數。如state.count 2. 只能寫同步寫法 3. 傳入參數2個以上時需包成object。vuex對此object稱為 payload 4. vue裡用 this.$store.commit 呼叫 |
getters | computed | 存放共用變數的組合變數,首個參數為state,便於組合 |
actions | methods | 1. vuex寫function時,首個參數為context,若沒用到module的話,可以當作整個state樹。如context.state.count 2. 可以寫異步 3. 傳入參數2個以上時需包成object。vuex對此object稱為 payload 4. vue裡用 this$store.dispatch 呼叫 |
在vue檔裡使用vuex
getters,state
就是一般的變數了,不複雜,就是單純的取值
1 | this.$store.state.count //即vue裡的data |
注意!!!
若是直接修改state值,是可以的
1 | this.$store.state.count = 3 |
但官方不建議如此使用,最好都是由mutations、actions來修改參數
在多人開發時若要避免有人不小心誤用的話,可以在vuex裡設定strict:true
當有人直接修改state的變數時,vue會有錯誤提醒
但該修改仍然會有效
1 | const store = new Vuex.Store({ |
正式環境下要關閉!不然會有效能上的影響
可以直接寫判斷式以免忘記更改
1 | const store = new Vuex.Store({ |
mutations
1 | this.$store.commit("updateCount",num) |
若需傳入2個以上的變數,則要用object包起來
1 | this.$store.commit("updatrCounter",{num:i++,num2:2}) |
即vuex本身限制commit
就只能傳有2個參數,第一個是function名稱,第二個傳入的所有參數,用object包起來。vuex對第二個傳入參數稱之為payload
以Python來比喻的話,可以想成此commit只傳入2個參數,而第2個參數為**kwargs
1 | class Vuex(object): |
actions
跟mutations差不多,唯一不同的是,在vue檔裡使用actions時,不是用commit
,是dispatch
1 | this.$store.dispatch("updateCount",num) |
vue檔裡使用vuex – 快速寫法
每次使用時都需要this.$store.commit(...)
,看起來既冗長又不方便
vuex本身仍提供了快速寫法的語法糖
可以透過mapGetters,mapState,mapMutations,mapActions
快速呼叫函式,省下一大堆this.$store.commit('myFunc')
的寫法
由於會使用到ES6的Destructuring Assignment,若有提示錯誤,則需安裝babel-present-stage-1
,並在babelrc裡的present新增"stage"
,使其可以使用es6以上的語法
1 | import {mapGetters,mapState,mapMutations,mapActions} from "vuex" |