沐鳴主管:_Vuex映射
vuex 是一把雙刃劍。如果使用得當,使用 vue 可以使你的工作更加輕鬆。如果不小心,它也會使你的代碼混亂不堪。
使用 Vuex 之前,你應該先了解四個主要概念:state、getter、mutation 和 action。一個簡單的 Vuex 狀態在 store 中的這些概念中操作數據。 Vuex 中的映射提供了一種從中檢索數據的好方法。
在文中,我將演示如何映射 Vuex 存儲中的數據。如果你熟悉 Vuex 基礎,那麼這些內容將會幫你編寫更簡潔、更便於維護的代碼。
本文假設你了解 Vue.js 和 Vuex 的基礎知識。
Vuex 中的映射是什麼?
Vuex 中的映射使你可以將 state 中的任何一種屬性(state、getter、mutation 和 action)綁定到組件中的計算屬性,並直接使用 state 中的數據。
下面是一個簡單的 Vuex store 例子,其中測試數據位於 state 中。
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
data: "test data"
}
})
如果要從 state 中訪問 data 的值,則可以在 Vue.js 組件中執行以下操作。
computed: {
getData(){
return this.$store.state.data
}
}
上面的代碼可以工作,但是隨着 state 數據量的開始增長,很快就會變得很難看。
例如:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
user: {
id:1,
age:23,
role:user
data:{
name:"user name",
address:"user address"
}
},
services: {},
medical_requests: {},
appointments: {},
}
}
})
要從處於 state 中的用戶對象獲取用戶名:
computed: {
getUserName(){
return this.$store.state.user.data.name
}
}
這樣可以完成工作,但是還有更好的方法。
映射 state
要將 state 映射到 Vue.js 組件中的計算屬性,可以運行以下命令。
import { mapGetters } from 'vuex';
export default{
computed: {
...mapState([
'user',
])
}
}
現在你可以訪問組件中的整個用戶對象。
你還可以做更多的事,例如把對象從 state 添加到 mapState 方法。
import { mapGetters } from 'vuex';
export default{
computed: {
...mapState([
'user',
'services'
])
}
}
如你所見,這要乾淨得多。可以通過以下方式輕鬆訪問用戶名:
{{user.data.name}}
services 對象和映射的許多其他的值也是如此。
你注意到我們是如何將數組傳遞給 mapState() 的嗎?如果需要為值指定其他名稱,則可以傳入一個對象。
import { mapGetters } from 'vuex';
export default{
computed: {
...mapState({
userDetails:'user',
userServices:'services'
})
}
}
現在可以通過簡單地調用 userDetails 來引用 user。
何時映射整個 state
根據經驗,僅當 state 中有大量數據,並且組件中全部需要它們時,才應該映射。
在上面的例子中,如果我們只需要一個值(例如 username),則映射整個用戶對象就沒有多大意義。
在映射時,整個對象將會全部加載到內存中。實際上我們並不想繼續把不需要的數據加載到內存中,因為這將是多餘的,並且從長遠來看會影響性能。
映射 getter
映射 getter 的語法與 mapState 函數相似。
import { mapGetters } from 'vuex'
export default {
computed: {
...mapGetters([
'firstCount',
'anotherGetter',
])
}
}
與映射 state 類似,如果你打算使用其他名稱,則可以把對象傳遞給 mapGetters 函數。
import { mapGetters } from 'vuex'
export default {
computed: {
...mapGetters([
first:'firstCount',
another:'anotherGetter',
])
}
}
映射 mutation
映射 Mutation 時,可以在用以下語法來提交 Mutation。
this.$store.commit('mutationName`)
例如:
import { mapMutations } from 'vuex'
export default {
methods: {
...mapMutations([
'search', // 映射 `this.increment()` 到 `this.$store.commit('search')`
// `mapMutations` 也支持 payloads:
'searchBy' // 映射 `this.incrementBy(amount)` 到 `this.$store.commit('searchBy', amount)`
]),
...mapMutations({
find: 'search' // 映射 `this.add()` 到 `this.$store.commit('search')`
})
}
}
映射 action
映射 action 與映射 mutation 非常相似,因為它也可以在方法中完成。使用映射器會把 this.$store.dispatch(‘actionName’) 綁定到映射器數組中的名稱或對象的鍵。
import { mapActions } from 'vuex'
export default {
// ...
methods: {
...mapActions([
'increment', // 映射 `this.increment()` 到 `this.$store.dispatch('increment')`
// `mapActions` 也支持 payloads:
'incrementBy' // 映射 `this.incrementBy(amount)` 到 `this.$store.dispatch('incrementBy', amount)`
]),
...mapActions({
add: 'increment' // 映射 `this.add()` 到 `this.$store.dispatch('increment')`
})
}
}
總結
看到這裏,你應該能夠學到:
- 對 Vuex 中的映射是如何工作的以及為什麼要使用它有了深刻的了解
- 能夠映射 Vuex store 中的所有組件(state、 getter、 mutation、action)
- 知道什麼時候應該映射 store
原文:https://blog.logrocket.com/a-complete-guide-to-mapping-in-vuex/
站長推薦
1.雲服務推薦: 國內主流雲服務商,各類雲產品的最新活動,優惠券領取。地址:阿里雲騰訊雲華為雲
2.廣告聯盟: 整理了目前主流的廣告聯盟平台,如果你有流量,可以作為參考選擇適合你的平台點擊進入
鏈接: http://www.fly63.com/article/detial/9675