vuex 快速入門

關於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
2
this.$store.state.count      //即vue裡的data
this.$store.getters.myCount // 即vue裡的computed

注意!!!

若是直接修改state值,是可以的

1
this.$store.state.count = 3

但官方不建議如此使用,最好都是由mutations、actions來修改參數

在多人開發時若要避免有人不小心誤用的話,可以在vuex裡設定strict:true

當有人直接修改state的變數時,vue會有錯誤提醒

但該修改仍然會有效

1
2
3
4
const store = new Vuex.Store({
// ...
strict: true
})

正式環境下要關閉!不然會有效能上的影響

可以直接寫判斷式以免忘記更改

1
2
3
4
const store = new Vuex.Store({
// ...
strict: process.env.NODE_ENV !== 'production'
})

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
2
3
4
class Vuex(object):
# ..略..
truedef commit(functionName,**payload): #vuex將參數包們稱為payload
pass

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
2
3
4
5
6
7
8
9
10
11
12
13
14
import {mapGetters,mapState,mapMutations,mapActions} from "vuex"
methods:{
...mapMutations(['updateName','myCount']), //呼叫用法跟當初宣告名稱一樣
...mapActions({
myUpdateName:'updateName',
myCounter:'myCount'
}) // 若要自定義使用的函式名稱
},
computed:{
...mapGetters(["fullname"])//呼叫用法跟當初宣告名稱一樣
...mapState({
counter:"count"
})//若要自定義使用的函式名稱
}

參考資料

VUEX官方文件