vuex 快速入門

發表於 更新於 分類於 ， Disqus：
Vuex是Vue.Js使用的公共變數管理的程式，此篇關於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):
  	# ..略..
	def 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官方文件

相關文章