傑森前端

mapSate

＃ 引入
import { mapState } from 'vuex'
# mapState
// 普通寫法
computed:{
	name(){
		return this.$store.state.key
	}
}
// 簡寫1物件寫法(這樣開發者工具不會出現在開發者工具中的computed裡面)
computed:{
	...mapState({
		模板要使用的name:'state的key'
	})
}
// 簡寫2陣列寫法(這樣開發者工具不會出現在開發者工具中的computed裡面)
computed:{
	...mapState(['key']) //使用的name要與定義的一樣的話可以直接這樣寫
}

mapGetters

＃ 引入
import { mapGetters } from 'vuex'
# mapGetters
// 普通寫法
computed:{
	name(){
		return this.$store.getters.key
	}
}
// 簡寫1物件寫法(這樣開發者工具不會出現在開發者工具中的computed裡面)
computed:{
	...mapGetters({
		模板要使用的name:'state的key'
	})
}
// 簡寫2陣列寫法(這樣開發者工具不會出現在開發者工具中的computed裡面)
computed:{
	...mapGetters(['key']) //使用的name要與定義的一樣的話可以直接這樣寫
}

mapMutations

＃ 引入
import { mapMutations } from 'vuex'
# mapMutations
// 普通寫法
this.$store.commit(name,value)
// 簡寫1物件寫法
computed:{
	...mapMutations({
		模板要使用的name:'state的key'
	})
}
// 簡寫2陣列寫法()
computed:{
	...mapMutations(['key']) //使用的name要與定義的一樣的話可以直接這樣寫
}

mapActions

＃ 引入
import { mapActions } from 'vuex'
# mapActions
// 普通寫法
this.$store.dispatch(name,value)
// 簡寫1物件寫法
computed:{
	...mapActions({
		模板要使用的name:'state的key'
	})
}
// 簡寫2陣列寫法
computed:{
	...mapActions(['key']) //使用的name要與定義的一樣的話可以直接這樣寫
}