欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vuex 命名空間 namespaced的使用

 更新時間:2023年03月05日 10:00:08   作者:前端小胖虎  
本文主要介紹了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數(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   
 }),

組件中調用命名空間模塊中的getters

computed:{
    // 使用擴展運算符“...”,將mapState和mapGetters返回的結果放到計算屬性中
  ...mapState({
    // 綁定購物車中的商品
    items:state=>state.shopcart.items
  }),
  // 綁定購物車中的商品總價
  ...mapGetters('shopcart',{total:'totalPrice'})
},

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

相關文章

  • vue路由對不同界面進行傳參及跳轉的總結

    vue路由對不同界面進行傳參及跳轉的總結

    這篇文章主要介紹了vue路由對不同界面進行傳參及跳轉的總結,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-04-04
  • 在Vue中創(chuàng)建可重用的 Transition的方法

    在Vue中創(chuàng)建可重用的 Transition的方法

    這篇文章主要介紹了在Vue中創(chuàng)建可重用的 Transition,本文通過示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-06-06
  • vue中如何實現(xiàn)拖拽調整順序功能

    vue中如何實現(xiàn)拖拽調整順序功能

    這篇文章主要介紹了vue中如何實現(xiàn)拖拽調整順序功能問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-05-05
  • Vue3中如何自定義雙向綁定

    Vue3中如何自定義雙向綁定

    這篇文章主要介紹了Vue3中如何自定義雙向綁定問題,具有很好的參考價價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-11-11
  • vue3項目打包與上線詳細圖文教程

    vue3項目打包與上線詳細圖文教程

    這篇文章主要給大家介紹了關于vue3項目打包與上線的相關資料,在項目完成得差不多得時候,就可以開始打包部署了,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
    2023-12-12
  • Vue全局loading及錯誤提示的思路與實現(xiàn)

    Vue全局loading及錯誤提示的思路與實現(xiàn)

    這篇文章主要給大家介紹了關于Vue全局loading及錯誤提示的思路與實現(xiàn)方法,文中通過示例代碼介紹的非常詳細,對大家學習或者使用Vue具有一定的參考學習價值,需要的朋友們下面來一起學習學習吧
    2019-08-08
  • 基于vue+echarts 數(shù)據(jù)可視化大屏展示的方法示例

    基于vue+echarts 數(shù)據(jù)可視化大屏展示的方法示例

    這篇文章主要介紹了基于vue+echarts 數(shù)據(jù)可視化大屏展示的方法示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2020-03-03
  • vue項目base64字符串轉圖片的實現(xiàn)代碼

    vue項目base64字符串轉圖片的實現(xiàn)代碼

    這篇文章主要介紹了vue項目base64字符串轉圖片的實現(xiàn)代碼,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
    2018-07-07
  • 詳解vue3.2中setup語法糖<script?lang="ts"?setup>

    詳解vue3.2中setup語法糖<script?lang="ts"?setup>

    Vue 3.2 引入了語法,這是一種稍微不那么冗長的聲明組件的方式,下面這篇文章主要介紹了詳解vue3.2中setup語法糖<script?lang="ts"setup>的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2023-01-01
  • 解決node-sass安裝報錯無python等情況

    解決node-sass安裝報錯無python等情況

    在國內安裝node-sass常因無法穩(wěn)定連接GitHub而失敗,解決方法包括手動下載對應的binding.node文件并放入緩存目錄,操作步驟詳細,適合非Python用戶,無需額外環(huán)境配置
    2024-10-10

最新評論