Vuex 命名空間 namespaced的使用
在項(xiàng)目中，如果需要用到Vuex，可以將 store 分割成多個(gè)模塊（module），每個(gè)模塊擁有自己的 state、mutation、action、getter，這樣你的模塊具有更高的封裝度和復(fù)用性，此時(shí)就用到了命名空間這個(gè)概念。（ 默認(rèn)情況下，模塊內(nèi)部的 action、mutation 和 getter 是注冊(cè)在全局命名空間的，這樣使得多個(gè)模塊能夠?qū)ν?mutation 或 action 作出響應(yīng)。）
1.如何使模塊成為一個(gè)命名空間模塊？
你可以在單個(gè)模塊中通過添加namespaced：true的方式使其成為帶命名空間的模塊。
export default {
namespaced:true,
state,
getters,
actions,
mutations
}
2.組件中如何獲取帶有命名空間moduleA中的state數(shù)據(jù)？
1、基本方式：
this.$store.state.moduleA.countA
2、mapState輔助函數(shù)方式：
...mapState({
count:state=>state.moduleB.countB
})
【例子】
computed:mapState({
// 將state中的商品列表數(shù)據(jù)作為goodslist的屬性
goodslist:state=>state.goods.list
}),
組件中調(diào)用命名空間模塊中的getters
computed:{
// 使用擴(kuò)展運(yùn)算符“...”,將mapState和mapGetters返回的結(jié)果放到計(jì)算屬性中
...mapState({
// 綁定購物車中的商品
items:state=>state.shopcart.items
}),
// 綁定購物車中的商品總價(jià)
...mapGetters('shopcart',{total:'totalPrice'})
},
到此這篇關(guān)于Vuex 命名空間 namespaced的使用的文章就介紹到這了,更多相關(guān)Vuex 命名空間 namespaced內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue路由對(duì)不同界面進(jìn)行傳參及跳轉(zhuǎn)的總結(jié)
這篇文章主要介紹了vue路由對(duì)不同界面進(jìn)行傳參及跳轉(zhuǎn)的總結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
在Vue中創(chuàng)建可重用的 Transition的方法
這篇文章主要介紹了在Vue中創(chuàng)建可重用的 Transition,本文通過示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-06-06
vue中如何實(shí)現(xiàn)拖拽調(diào)整順序功能
這篇文章主要介紹了vue中如何實(shí)現(xiàn)拖拽調(diào)整順序功能問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要介紹了Vue3中如何自定義雙向綁定問題,具有很好的參考價(jià)價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
這篇文章主要給大家介紹了關(guān)于vue3項(xiàng)目打包與上線的相關(guān)資料,在項(xiàng)目完成得差不多得時(shí)候,就可以開始打包部署了,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
Vue全局loading及錯(cuò)誤提示的思路與實(shí)現(xiàn)
這篇文章主要給大家介紹了關(guān)于Vue全局loading及錯(cuò)誤提示的思路與實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
基于vue+echarts 數(shù)據(jù)可視化大屏展示的方法示例
這篇文章主要介紹了基于vue+echarts 數(shù)據(jù)可視化大屏展示的方法示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2020-03-03
vue項(xiàng)目base64字符串轉(zhuǎn)圖片的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue項(xiàng)目base64字符串轉(zhuǎn)圖片的實(shí)現(xiàn)代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-07-07
詳解vue3.2中setup語法糖<script?lang="ts"?setup>
Vue 3.2 引入了語法,這是一種稍微不那么冗長的聲明組件的方式,下面這篇文章主要介紹了詳解vue3.2中setup語法糖<script?lang="ts"setup>的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01
解決node-sass安裝報(bào)錯(cuò)無python等情況
在國內(nèi)安裝node-sass常因無法穩(wěn)定連接GitHub而失敗,解決方法包括手動(dòng)下載對(duì)應(yīng)的binding.node文件并放入緩存目錄,操作步驟詳細(xì),適合非Python用戶,無需額外環(huán)境配置2024-10-10