Vuex 命名空間 namespaced的使用

更新時(shí)間：2023年03月05日 10:00:08 作者：前端小胖虎

本文主要介紹了Vuex 命名空間 namespaced的使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

在項(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è)模塊中通過(guò)添加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({
    // 綁定購(gòu)物車中的商品
    items:state=>state.shopcart.items
  }),
  // 綁定購(gòu)物車中的商品總價(jià)
  ...mapGetters('shopcart',{total:'totalPrice'})
},

到此這篇關(guān)于Vuex 命名空間 namespaced的使用的文章就介紹到這了,更多相關(guān)Vuex 命名空間 namespaced內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue踩坑記錄之src的動(dòng)態(tài)綁定賦值問(wèn)題
這篇文章主要介紹了vue踩坑記錄之src的動(dòng)態(tài)綁定賦值問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-06-06
uni-app資源引用的方法匯總(絕對(duì)路徑和相對(duì)路徑)
在基于UniApp開(kāi)發(fā)跨平臺(tái)應(yīng)用時(shí),開(kāi)發(fā)者通過(guò)特定語(yǔ)法來(lái)管理和加載應(yīng)用程序的各種資源文件,如圖片、字體、音頻、視頻等,在uni-app中,資源通常會(huì)被組織在項(xiàng)目的各個(gè)目錄下,本文給大家介紹了uni-app資源引用的方法匯總,需要的朋友可以參考下
2025-01-01
Element-ui之ElScrollBar組件滾動(dòng)條的使用方法
這篇文章主要介紹了Element-ui之ElScrollBar組件滾動(dòng)條的使用方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
Vue 一鍵清空表單的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue 一鍵清空表單的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-02-02
詳解Vue3 Teleport 的實(shí)踐及原理
這篇文章主要介紹了Vue3 Teleport 組件的實(shí)踐及原理，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-12-12
詳解Vue2.0配置mint-ui踩過(guò)的那些坑
這篇文章主要介紹了詳解Vue2.0配置mint-ui踩過(guò)的那些坑，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-04-04
Vue全家桶實(shí)踐項(xiàng)目總結(jié)(推薦)
本篇文章主要介紹了Vue全家桶實(shí)踐項(xiàng)目總結(jié)(推薦)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-11-11
django+vue項(xiàng)目搭建實(shí)現(xiàn)前后端通信
本文主要介紹了django+vue項(xiàng)目搭建實(shí)現(xiàn)前后端通信，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-02-02
vue開(kāi)發(fā)樹(shù)形結(jié)構(gòu)組件(組件遞歸)
這篇文章主要為大家詳細(xì)介紹了vue開(kāi)發(fā)樹(shù)形結(jié)構(gòu)組件的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-08-08
在Vue中解決跨域問(wèn)題的常用方式
跨域問(wèn)題是由瀏覽器引起的安全限制,而不是Vue框架本身導(dǎo)致的,Vue本身并不限制跨域訪問(wèn),它只是一個(gè)前端框架,負(fù)責(zé)構(gòu)建用戶界面和處理數(shù)據(jù)邏輯,本文給大家介紹了在Vue中解決跨域問(wèn)題的常用方式,需要的朋友可以參考下
2023-10-10