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

就是一般的變數了，不複雜，就是單純的取值

this.$store.state.count      //即vue裡的data
this.$store.getters.myCount  // 即vue裡的computed

注意！！！

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

this.$store.state.count = 3

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

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

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

但該修改仍然會有效

const store = new Vuex.Store({
  // ...
  strict: true
})

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

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

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

mutations

this.$store.commit("updateCount",num)

若需傳入2個以上的變數，則要用object包起來

this.$store.commit("updatrCounter",{num:i++,num2:2})

即vuex本身限制commit就只能傳有2個參數，第一個是function名稱，第二個傳入的所有參數，用object包起來。vuex對第二個傳入參數稱之為payload

以Python來比喻的話，可以想成此commit只傳入2個參數，而第2個參數為**kwargs

class Vuex(object):
  	# ..略..
	def commit(functionName,**payload): #vuex將參數包們稱為payload
    	pass

actions

跟mutations差不多，唯一不同的是，在vue檔裡使用actions時，不是用commit，是dispatch

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以上的語法

import {mapGetters,mapState,mapMutations,mapActions} from "vuex"
methods:{
   ...mapMutations(['updateName','myCount']), //呼叫用法跟當初宣告名稱一樣
   ...mapActions({
   		myUpdateName:'updateName',
   		myCounter:'myCount'
   }) // 若要自定義使用的函式名稱
},
computed:{
    ...mapGetters(["fullname"])//呼叫用法跟當初宣告名稱一樣
    ...mapState({
    	counter:"count"
    })//若要自定義使用的函式名稱
}

參考資料

VUEX官方文件