溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“Vuex命名空間namespaced怎么使用”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“Vuex命名空間namespaced怎么使用”文章能幫助大家解決問題。
在項目中，如果需要用到Vuex，可以將 store 分割成多個模塊（module），每個模塊擁有自己的 state、mutation、action、getter，這樣你的模塊具有更高的封裝度和復用性，此時就用到了命名空間這個概念。（ 默認情況下，模塊內部的 action、mutation 和 getter 是注冊在全局命名空間的，這樣使得多個模塊能夠對同一 mutation 或 action 作出響應。）
1.如何使模塊成為一個命名空間模塊？
你可以在單個模塊中通過添加namespaced：true的方式使其成為帶命名空間的模塊。
export default {
namespaced:true,
state,
getters,
actions,
mutations
}2.組件中如何獲取帶有命名空間moduleA中的state數據？
1、基本方式：
this.$store.state.moduleA.countA
2、mapState輔助函數方式：
...mapState({
count:state=>state.moduleB.countB
})
【例子】
computed:mapState({
// 將state中的商品列表數據作為goodslist的屬性
goodslist:state=>state.goods.list
}),組件中調用命名空間模塊中的getters
computed:{
// 使用擴展運算符“...”,將mapState和mapGetters返回的結果放到計算屬性中
...mapState({
// 綁定購物車中的商品
items:state=>state.shopcart.items
}),
// 綁定購物車中的商品總價
...mapGetters('shopcart',{total:'totalPrice'})
},關于“Vuex命名空間namespaced怎么使用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
