vuex模塊怎么獲取數據

今天小編給大家分享一下vuex模塊怎么獲取數據的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

一、模塊必寫

示例：namespaced:true

必寫原因 為，當多模塊整合時，actions和mutations會整合為數組，但是getters不會，它是唯一的，不會整合，所以為了getters正常使用的同時每個模塊具有獨立性和可復用，namespaced:true必須寫。

二、獲取數據

1.正常獲取模塊數據

代碼如下（示例）：

 this.$store.state.模塊.num  //數據
 this.$store.dispatch('模塊/方法')  //方法
 this.$store.getters['模塊/sum']

這個方法可以獲取到數據，但是看起來是不是比較麻煩，尤其是當這個數據沒太多的邏輯處理，直接插入視圖，代碼看起來太多了，接下來給大家分享其他方法

2.輔助函數獲取模塊數據

vuex中提供了四種輔助函數，mapState,mapActions,mapMutations,mapGetters,寫的時候直接從vuex中提溜出來

示例：

import {mapState,mapActions,mapMutations,mapGetters} from 'vuex'

使用方法：

計算屬性：

...mapState('模塊'，{n:"num"})  //第一種對象寫法
 
...mapState('模塊',["num"])     //第二種數組寫法

方法中：

...mapMutations("模塊"，["方法"])

2.createnamespacedhelpers獲取模塊數據（官網提供）

它也是vuex中的一部分，它是一個對象，對象包含四個輔助函數，如圖所示：

 當我們知道它是什么之后，接下來就是使用

引入 

import {createNamespacedHelpers} from "vuex"

打印之后我們也知道createNamespacedHelpers它是一個對象，呢我們就可以通過解構賦值拿到那四個輔助函數 ，示例：

let {mapstate,mapGetters,mapMutations} = createNamespacedHelpers("模塊")

這時使用就跟上面的輔助函數的方法大差不差

計算屬性：

...mapState(["num"])

以上就是“vuex模塊怎么獲取數據”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。