Vuex 命名空間 namespaced的使用
在項目中,如果需要用到Vuex,可以將 store 分割成多個模塊(module),每個模塊擁有自己的 state、mutation、action、getter,這樣你的模塊具有更高的封裝度和復(fù)用性,此時就用到了命名空間這個概念。( 默認(rèn)情況下,模塊內(nèi)部的 action、mutation 和 getter 是注冊在全局命名空間的,這樣使得多個模塊能夠?qū)ν?mutation 或 action 作出響應(yīng)。)
1.如何使模塊成為一個命名空間模塊?
你可以在單個模塊中通過添加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ò)展運算符“...”,將mapState和mapGetters返回的結(jié)果放到計算屬性中 ...mapState({ // 綁定購物車中的商品 items:state=>state.shopcart.items }), // 綁定購物車中的商品總價 ...mapGetters('shopcart',{total:'totalPrice'}) },
到此這篇關(guān)于Vuex 命名空間 namespaced的使用的文章就介紹到這了,更多相關(guān)Vuex 命名空間 namespaced內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue路由對不同界面進(jìn)行傳參及跳轉(zhuǎn)的總結(jié)
這篇文章主要介紹了vue路由對不同界面進(jìn)行傳參及跳轉(zhuǎn)的總結(jié),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04在Vue中創(chuàng)建可重用的 Transition的方法
這篇文章主要介紹了在Vue中創(chuàng)建可重用的 Transition,本文通過示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-06-06基于vue+echarts 數(shù)據(jù)可視化大屏展示的方法示例
這篇文章主要介紹了基于vue+echarts 數(shù)據(jù)可視化大屏展示的方法示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2020-03-03vue項目base64字符串轉(zhuǎn)圖片的實現(xiàn)代碼
這篇文章主要介紹了vue項目base64字符串轉(zhuǎn)圖片的實現(xiàn)代碼,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2018-07-07詳解vue3.2中setup語法糖<script?lang="ts"?setup>
Vue 3.2 引入了語法,這是一種稍微不那么冗長的聲明組件的方式,下面這篇文章主要介紹了詳解vue3.2中setup語法糖<script?lang="ts"setup>的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01